/* * Ecomus — the storefront's look, as data. * * Every rule sits under .theme-candan-saka, which the shell adds to when this theme is the * active one. That scope is not decoration: the panel shares the same build, and a stylesheet * that could reach it would undo the separation the whole theme system exists to keep. * * Colours and sizes come from the custom properties the manifest sets (--ng-*), so retuning the * palette is a JSON edit, not a stylesheet edit. */ /* ========================================================================================== Variable firewall. The PANEL's accent script writes --primary / --primary-foreground onto as the panel user's personal colour, and custom properties inherit - without this block the shop's buttons wear whichever accent the last admin picked, which is nobody's brand. Redefining the variables on the shop's own root wins for everything inside it, because a descendant's definition beats an inherited one. The storefront is styled by its THEME, full stop - the panel's look must never reach it. ========================================================================================== */ .ng-site { --primary: var(--ng-color-primary); --primary-foreground: var(--ng-color-on-primary); --accent: var(--ng-color-bg-alt); --accent-foreground: var(--ng-color-text); --ring: var(--ng-color-primary); --border: var(--ng-color-line); --background: var(--ng-color-bg); --foreground: var(--ng-color-text); --muted: var(--ng-color-bg-alt); --muted-foreground: var(--ng-color-muted); } .theme-candan-saka { --card-hover-lift: -2px; /* Padding plus the tallest thing in the header row. Declared on the ROOT because a transparent bar is out of the flow and its SIBLINGS have to know how much room it would have taken - which they cannot read off the bar itself. */ --ng-header-height: 68px; } /* The template's body type: 14px on a 22px line. Declared here rather than left to the browser's 16px because almost every size on the shop is a deliberate step away from this one - a control that says nothing about its own font is meant to be 14/22, and inheriting 16 quietly enlarges every such control by an eighth. */ .theme-candan-saka, .theme-candan-saka .ng-site { font-family: var(--ng-font-body); font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ng-color-text); background: var(--ng-color-bg); } /* ── Buttons ─────────────────────────────────────────────────────────── */ .theme-candan-saka .ng-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; font-size: 14px; font-weight: 500; line-height: 1; border: 1px solid transparent; border-radius: var(--ng-radius-pill); transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .theme-candan-saka .ng-btn--primary { background: var(--ng-color-text); color: var(--ng-color-bg); } .theme-candan-saka .ng-btn--primary:hover { background: var(--ng-color-primary); } .theme-candan-saka .ng-btn--ghost { border-color: var(--ng-color-line); color: var(--ng-color-text); } .theme-candan-saka .ng-btn--ghost:hover { border-color: var(--ng-color-text); } .theme-candan-saka .ng-btn--block { width: 100%; } /* ── Sections ────────────────────────────────────────────────────────── */ .theme-candan-saka .ng-section { margin-bottom: var(--ng-space-section); } .theme-candan-saka .ng-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; } .theme-candan-saka .ng-section__title { font-family: var(--ng-font-heading); font-size: 28px; font-weight: 600; letter-spacing: -.01em; } .theme-candan-saka .ng-section__link { font-size: 14px; color: var(--ng-color-muted); text-decoration: underline; text-underline-offset: 3px; } /* ── Product card ────────────────────────────────────────────────────── */ .theme-candan-saka .ng-product-card { position: relative; } .theme-candan-saka .ng-product-card__media { position: relative; overflow: hidden; border-radius: var(--ng-radius-md); background: var(--ng-color-bg-alt); } /* The crop the manifest asked for. Attribute selectors rather than classes so the shape stays a THEME decision while the markup stays the same. */ .theme-candan-saka .ng-product-card[data-media-ratio="1:1"] .ng-product-card__media { aspect-ratio: 1 / 1; } .theme-candan-saka .ng-product-card[data-media-ratio="3:4"] .ng-product-card__media { aspect-ratio: 3 / 4; } .theme-candan-saka .ng-product-card[data-media-ratio="4:5"] .ng-product-card__media { aspect-ratio: 4 / 5; } .theme-candan-saka .ng-product-card__image { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease, transform .6s ease; } .theme-candan-saka .ng-product-card__image--hover { position: absolute; inset: 0; opacity: 0; } .theme-candan-saka .ng-product-card:hover .ng-product-card__image--hover { opacity: 1; } .theme-candan-saka .ng-product-card:hover .ng-product-card__image { transform: scale(1.04); } .theme-candan-saka .ng-product-card__body { padding: 14px 2px 0; text-align: center; } .theme-candan-saka .ng-product-card__title { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; } .theme-candan-saka .ng-product-card__title:hover { color: var(--ng-color-primary); } .theme-candan-saka .ng-product-card__price { margin-top: 6px; font-size: 14px; font-weight: 600; } .theme-candan-saka .ng-product-card__price--old { margin-left: 8px; color: var(--ng-color-muted); font-weight: 400; text-decoration: line-through; } /* ── Product grid ────────────────────────────────────────────────────── */ .theme-candan-saka .ng-product-list__grid { display: grid; gap: var(--ng-space-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .theme-candan-saka .ng-product-list[data-columns="3"] .ng-product-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .theme-candan-saka .ng-product-list[data-columns="4"] .ng-product-list__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .theme-candan-saka .ng-product-list[data-columns="5"] .ng-product-list__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ── Category nav ────────────────────────────────────────────────────── */ .theme-candan-saka .ng-category-nav { display: flex; flex-wrap: wrap; gap: 8px; } .theme-candan-saka .ng-category-nav__item { padding: 8px 18px; font-size: 14px; border: 1px solid var(--ng-color-line); border-radius: var(--ng-radius-pill); transition: border-color .2s ease, background-color .2s ease; } .theme-candan-saka .ng-category-nav__item:hover, .theme-candan-saka .ng-category-nav__item--active { border-color: var(--ng-color-text); background: var(--ng-color-text); color: var(--ng-color-bg); } /* ── Page frame ──────────────────────────────────────────────────────── */ /* * The shop's own container. The shell no longer imposes a width or padding on storefront pages — * how wide a shop reads is a design decision, so it lives here. */ /* * FULL WIDTH by default. A shop of this kind is built from full-bleed bands — the film, a * collection strip, a banner row — with the reading width applied INSIDE the bands that hold * text or a grid. Constraining the page itself is what made everything sit in a column with * white gutters either side, which is the one thing this design is not. */ .theme-candan-saka .ng-site__main { width: 100%; padding: 0 0 80px; } /* The reading width, applied per band rather than to the page. */ .theme-candan-saka .ng-section, .theme-candan-saka .ng-html, .theme-candan-saka .ng-banners { max-width: 1400px; margin-inline: auto; padding-inline: 24px; } @media (min-width: 1600px) { .theme-candan-saka .ng-section, .theme-candan-saka .ng-html, .theme-candan-saka .ng-banners { max-width: 1600px; } } /* ── Header ──────────────────────────────────────────────────────────── */ /* ── Top strip ───────────────────────────────────────────────────────── */ /* Colours come from the settings, so only the shape is here. */ .theme-candan-saka .ng-topbar { font-size: 12px; } .theme-candan-saka .ng-topbar__inner { display: grid; align-items: center; gap: 16px; max-width: 1600px; margin: 0 auto; padding: 8px 24px; grid-template-columns: 1fr auto 1fr; } .theme-candan-saka .ng-topbar__start { justify-self: start; } .theme-candan-saka .ng-topbar__middle { justify-self: center; } .theme-candan-saka .ng-topbar__end { display: flex; align-items: center; gap: 12px; justify-self: end; } /* On a phone the three places become one line of whatever is there. */ @media (max-width: 640px) { .theme-candan-saka .ng-topbar__inner { grid-template-columns: 1fr; justify-items: center; } } /* ── Header ──────────────────────────────────────────────────────────── */ .theme-candan-saka .ng-header { border-bottom: 1px solid var(--ng-color-line); /* The colour is the setting's, and the opacity is applied TO THE COLOUR rather than to the bar: fading the bar itself would fade the logo and the links with it. */ background: color-mix(in srgb, var(--ng-header-bg, var(--ng-color-bg)) calc(var(--ng-header-opacity, 1) * 100%), transparent); backdrop-filter: blur(var(--ng-header-blur, 0px)); } .theme-candan-saka .ng-header__inner { display: flex; align-items: center; gap: 28px; max-width: 1600px; margin: 0 auto; /* As a variable, because the language dropdown adds exactly this (plus the border) to reach the bar's bottom line from inside the row - one number, defined once. */ padding: var(--ng-header-pad-block, 18px) 24px; } /* Where the empty space falls is the whole difference between the arrangements: the actions are always last, so pushing the gap around moves the logo without moving them. */ .theme-candan-saka .ng-header[data-layout="logo-menu"] .ng-header__nav { margin-inline-end: auto; } .theme-candan-saka .ng-header[data-layout="menu-logo"] .ng-header__nav { margin-inline-end: auto; } .theme-candan-saka .ng-header[data-layout="menu-logo"] .ng-header__brand { margin-inline-end: auto; } .theme-candan-saka .ng-header[data-layout="menu-logo-menu"] .ng-header__nav:first-child { margin-inline-end: auto; } .theme-candan-saka .ng-header[data-layout="menu-logo-menu"] .ng-header__nav:nth-of-type(2) { margin-inline-start: auto; } /* The logo takes the middle of the row and the links sit to its left. */ .theme-candan-saka .ng-header[data-layout="logo-centre"] .ng-header__brand { position: absolute; left: 50%; transform: translateX(-50%); } .theme-candan-saka .ng-header[data-layout="logo-centre"] .ng-header__inner { position: relative; } .theme-candan-saka .ng-header[data-layout="logo-centre"] .ng-header__nav { margin-inline-end: auto; } .theme-candan-saka .ng-header__brand { font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .theme-candan-saka .ng-header__nav { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 500; } .theme-candan-saka .ng-header__nav a:hover { color: var(--ng-color-primary); } .theme-candan-saka .ng-header__actions { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: 14px; } .theme-candan-saka .ng-header__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 600; color: #fff; background: var(--ng-color-primary); border-radius: var(--ng-radius-pill); } /* A transparent bar floats over a full-height hero; the manifest picks which. */ /* "Transparent" says WHERE the bar sits, not what colour it is: it floats over the page instead of pushing it down. The colour, how much of it, and the blur are the shop's settings - a theme rule that also set a background would quietly overrule every one of them. */ .theme-candan-saka .ng-header[data-style="transparent"] { position: fixed; inset: 0 0 auto; /* Below the info band when there is one: the band publishes its height as a variable, and zero when it has nothing to say. Without this the fixed bar pins to the viewport top and sits ON the band - which is exactly the bug this line is the memory of. */ top: var(--ng-band-height, 0px); z-index: 50; border-bottom: 0; } /* Alongside a FIXED header the band is fixed too, stacked above it - a strip that scrolled away while the bar stayed would leave a band-sized hole over the page. With a solid header both sit in normal flow and none of this applies. */ .theme-candan-saka .ng-info-ticker:has(~ .ng-header[data-style="transparent"]) { position: fixed; inset: 0 0 auto; z-index: 60; } /* A fixed bar takes itself out of the flow, so the page has to be told it is there. Without this every page that does not open with something full-bleed starts underneath it. */ .theme-candan-saka .ng-header[data-style="transparent"] ~ .ng-site__main { padding-top: calc(var(--ng-header-height) + var(--ng-band-height, 0px)); } /* And the exception the floating bar exists for: a block that says it runs EDGE TO EDGE, and only when it is the first thing on the page, slides back up under the bar. The block declares it, not this rule: naming the hero here would break the day it is hidden or moved, and pulling up whatever happens to be first would put a shelf's heading under the bar. */ .theme-candan-saka .ng-header[data-style="transparent"] ~ .ng-site__main > [data-full-bleed="true"]:first-child, .theme-candan-saka .ng-header[data-style="transparent"] ~ .ng-site__main > .ng-home > [data-full-bleed="true"]:first-child { margin-top: calc(-1 * var(--ng-header-height)); } /* ── Hero ────────────────────────────────────────────────────────────── */ .theme-candan-saka .ng-hero { position: relative; overflow: hidden; margin: 0 0 var(--ng-space-section); } .theme-candan-saka .ng-hero[data-size="full"] { min-height: 100svh; } .theme-candan-saka .ng-hero[data-size="half"] { min-height: 62svh; } .theme-candan-saka .ng-hero[data-size="banner"] { min-height: 38svh; } .theme-candan-saka .ng-hero__media { position: absolute; inset: 0; } /* Whatever a layout put in it fills it: a grid's tracks, a slider's stack. */ .theme-candan-saka .ng-hero__media > * { width: 100%; height: 100%; } /* One piece of media and whatever it turned out to be - a picture, a film, an embed. */ .theme-candan-saka .ng-hero__frame { position: relative; display: block; overflow: hidden; width: 100%; height: 100%; } .theme-candan-saka .ng-hero__frame > * { width: 100%; height: 100%; object-fit: cover; border: 0; } /* ── Side by side ────────────────────────────────────────────────────── */ .theme-candan-saka .ng-hero__grid { display: grid; height: 100%; gap: 2px; /* ONE row: the band is as tall as it is, and a second row would push the page apart. */ grid-template-rows: 100%; grid-template-columns: repeat(var(--ng-hero-columns, 1), minmax(0, 1fr)); } .theme-candan-saka .ng-hero__grid[data-columns="2"] { --ng-hero-columns: 2; } .theme-candan-saka .ng-hero__grid[data-columns="3"] { --ng-hero-columns: 3; } .theme-candan-saka .ng-hero__grid[data-columns="4"] { --ng-hero-columns: 4; } /* A phone is one column wide whatever the setting says: four pictures across a 380px screen is four pictures nobody can see. */ @media (max-width: 640px) { .theme-candan-saka .ng-hero__grid { --ng-hero-columns: 1; } } /* ── Slider ──────────────────────────────────────────────────────────── */ .theme-candan-saka .ng-hero__slider, .theme-candan-saka .ng-hero__slides { position: relative; z-index: 0; width: 100%; height: 100%; } .theme-candan-saka .ng-hero__slider { /* Says the band can be dragged, and stops a sideways drag from being read as a page scroll - a vertical one still scrolls, which is what somebody reading the page expects. */ cursor: grab; touch-action: pan-y; user-select: none; } .theme-candan-saka .ng-hero__slider:active { cursor: grabbing; } /* Every slide stacked in the same place; which one shows is the only difference between the effects, so an effect is a rule here rather than a branch in the component. */ .theme-candan-saka .ng-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--ng-hero-speed, 600ms) ease, transform var(--ng-hero-speed, 600ms) ease; } /* The one being shown sits above its neighbours: whatever else moves, it moves BEHIND the picture somebody is looking at rather than across it. */ .theme-candan-saka .ng-hero__slide[data-current="true"] { z-index: 1; opacity: 1; } /* ── Sliding ─────────────────────────────────────────────────────────── */ /* The neighbours are parked one band away on each side, so a drag reveals the one it is heading towards instead of an empty stage. --ng-hero-drag is how far the hand has moved; it is zero whenever nothing is being dragged, which leaves these transforms at their resting places. */ .theme-candan-saka .ng-hero__slider[data-effect="slide"] .ng-hero__slide[data-side="previous"] { opacity: 1; transform: translateX(calc(-100% + var(--ng-hero-drag, 0px))); } .theme-candan-saka .ng-hero__slider[data-effect="slide"] .ng-hero__slide[data-side="next"] { opacity: 1; transform: translateX(calc(100% + var(--ng-hero-drag, 0px))); } .theme-candan-saka .ng-hero__slider[data-effect="slide"] .ng-hero__slide[data-current="true"] { transform: translateX(var(--ng-hero-drag, 0px)); } /* Anything further than one step away stays hidden: a wide drag should uncover the next picture, not the whole strip. Parked OFF-STAGE and with no transition, which is the whole point of this rule: a far slide left at the resting position sits exactly where the current one does, so the moment it became a neighbour it animated from the middle of the band to the edge - one picture flying across the screen between two ordinary slides. */ .theme-candan-saka .ng-hero__slider[data-effect="slide"] .ng-hero__slide[data-side="far"] { opacity: 0; transform: translateX(200%); transition: none; } /* Fading ignores the drag: there is no band to move, only one picture giving way to another. */ .theme-candan-saka .ng-hero__slider[data-effect="fade"] .ng-hero__slide { transform: none; } .theme-candan-saka .ng-hero__arrow { position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #fff; cursor: pointer; background: rgb(0 0 0 / 35%); border: 0; border-radius: var(--ng-radius-pill); transform: translateY(-50%); } .theme-candan-saka .ng-hero__arrow:hover { background: rgb(0 0 0 / 55%); } .theme-candan-saka .ng-hero__arrow[data-direction="previous"] { inset-inline-start: 16px; } .theme-candan-saka .ng-hero__arrow[data-direction="next"] { inset-inline-end: 16px; } .theme-candan-saka .ng-hero__dots { position: absolute; bottom: 16px; left: 0; z-index: 3; display: flex; justify-content: center; width: 100%; gap: 8px; } /* A dot inside a ring: the dot is always the same size, and the one being shown gets a halo around it rather than growing. */ .theme-candan-saka .ng-hero__dot { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; cursor: pointer; background: transparent; border: 0; border-radius: var(--ng-radius-pill); transition: background var(--ng-hero-speed, 300ms) ease; } .theme-candan-saka .ng-hero__dot::before { width: 6px; height: 6px; content: ""; background: #111; border-radius: var(--ng-radius-pill); } .theme-candan-saka .ng-hero__dot[data-current="true"] { background: rgb(0 0 0 / 16%); } .theme-candan-saka .ng-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 45%, rgba(0,0,0,.65)); } .theme-candan-saka .ng-hero__body { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: inherit; padding: 120px 24px 80px; text-align: center; color: #fff; } .theme-candan-saka .ng-hero__title { max-width: 18ch; font-family: var(--ng-font-heading); font-size: clamp(32px, 6vw, 68px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; } .theme-candan-saka .ng-hero__subtitle { margin-top: 16px; max-width: 46ch; font-size: clamp(14px, 1.6vw, 18px); color: rgba(255, 255, 255, .82); } .theme-candan-saka .ng-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; } .theme-candan-saka .ng-hero__actions .ng-btn--primary { background: #fff; color: #111; } .theme-candan-saka .ng-hero__actions .ng-btn--primary:hover { background: rgba(255,255,255,.88); } .theme-candan-saka .ng-hero__actions .ng-btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; } .theme-candan-saka .ng-hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .7); } /* ── Banners ─────────────────────────────────────────────────────────── */ .theme-candan-saka .ng-banners { display: grid; gap: var(--ng-space-gap); margin-bottom: var(--ng-space-section); grid-template-columns: 1fr; } @media (min-width: 768px) { .theme-candan-saka .ng-banners[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .theme-candan-saka .ng-banners[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .theme-candan-saka .ng-banner { position: relative; overflow: hidden; border-radius: var(--ng-radius-md); } .theme-candan-saka .ng-banner img { width: 100%; display: block; transition: transform .6s ease; } .theme-candan-saka .ng-banner:hover img { transform: scale(1.04); } /* ── Newsletter ──────────────────────────────────────────────────────── */ /* A full-bleed band, like the collection strip: colour runs edge to edge, text stays centred. */ .theme-candan-saka .ng-newsletter { margin-bottom: var(--ng-space-section); padding: 72px 24px; text-align: center; background: var(--ng-color-bg-alt); } .theme-candan-saka .ng-newsletter__title { font-family: var(--ng-font-heading); font-size: 26px; font-weight: 600; } .theme-candan-saka .ng-newsletter__text { margin: 8px auto 0; max-width: 44ch; color: var(--ng-color-muted); font-size: 14px; } .theme-candan-saka .ng-newsletter__form { display: flex; gap: 8px; max-width: 460px; margin: 24px auto 0; } .theme-candan-saka .ng-newsletter__input { flex: 1; height: 46px; padding: 0 16px; font-size: 14px; border: 1px solid var(--ng-color-line); border-radius: var(--ng-radius-pill); background: var(--ng-color-bg); } /* ── Footer ──────────────────────────────────────────────────────────── */ .theme-candan-saka .ng-footer { padding: 40px 16px; border-top: 1px solid var(--ng-color-line); background: var(--ng-color-bg-alt); color: var(--ng-color-muted); font-size: 13px; text-align: center; } /* ── Home flow ───────────────────────────────────────────────────────── */ .theme-candan-saka .ng-home > * + * { margin-top: var(--ng-space-section); } /* The page is already full width, so a hero simply fills it — no escaping needed. */ .theme-candan-saka .ng-home > .ng-hero { margin-top: 0; } .theme-candan-saka .ng-hero__scroll[data-visible="false"] { opacity: 0; pointer-events: none; } .theme-candan-saka .ng-hero__scroll { transition: opacity .3s ease; } .theme-candan-saka .ng-hero__scroll svg { animation: ng-bounce 1.6s ease-in-out infinite; } @keyframes ng-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ── Header details ──────────────────────────────────────────────────── */ .theme-candan-saka .ng-header__action { display: inline-flex; align-items: center; gap: 6px; } .theme-candan-saka .ng-header__action:hover { color: var(--ng-color-primary); } /* ── Language menu ───────────────────────────────────────────────────── */ /* The anchor the list hangs from: absolutely positioned below, so opening it draws over the page instead of pushing the header apart. */ .theme-candan-saka .ng-language { position: relative; } .theme-candan-saka .ng-language__trigger { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0; font-size: 12px; color: inherit; /* No box: the actions beside it - wishlist, cart, account - are plain text, and a framed control among them reads as a form field that wandered into the header. */ background: transparent; border: 0; cursor: pointer; } .theme-candan-saka .ng-language__trigger:hover { color: var(--ng-color-primary); } /* The two-letter code reads as a label rather than as part of the name beside it. */ .theme-candan-saka .ng-language__code { font-weight: 600; letter-spacing: 0.04em; opacity: 0.7; } .theme-candan-saka .ng-language__chevron { opacity: 0.5; } .theme-candan-saka .ng-language__menu { position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 50; min-width: 160px; padding: 4px; margin: 0; list-style: none; background: var(--ng-color-bg); border: 1px solid var(--ng-color-line); border-radius: var(--ng-radius-md); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); } .theme-candan-saka .ng-language__option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; font-size: 13px; color: var(--ng-color-text); text-align: start; background: transparent; border: 0; border-radius: var(--ng-radius-sm); cursor: pointer; } .theme-candan-saka .ng-language__option:hover { background: var(--ng-color-bg-alt); } .theme-candan-saka .ng-language__option[data-selected="true"] { font-weight: 600; } /* Pushed to the far end so the names stay left-aligned with each other. */ .theme-candan-saka .ng-language__check { margin-inline-start: auto; color: var(--ng-color-primary); } .theme-candan-saka .ng-language__name { white-space: nowrap; } @media (max-width: 640px) { .theme-candan-saka .ng-header__action-label { display: none; } .theme-candan-saka .ng-header__inner { flex-wrap: wrap; gap: 12px 18px; } } /* ── Carousel ────────────────────────────────────────────────────────── */ .theme-candan-saka .ng-carousel { position: relative; } /* The browser's own scrolling: keyboard, trackpad momentum and snapping come free. */ .theme-candan-saka .ng-carousel__track { display: grid; gap: 30px; overflow-x: auto; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--ng-carousel-columns, 4) - 1) * 30px) / var(--ng-carousel-columns, 4)); scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; user-select: none; } .theme-candan-saka .ng-carousel__track::-webkit-scrollbar { display: none; } .theme-candan-saka .ng-carousel__track:active { cursor: grabbing; } .theme-candan-saka .ng-carousel__track > * { scroll-snap-align: start; } .theme-candan-saka .ng-carousel[data-columns="2"] { --ng-carousel-columns: 2; } .theme-candan-saka .ng-carousel[data-columns="3"] { --ng-carousel-columns: 3; } .theme-candan-saka .ng-carousel[data-columns="4"] { --ng-carousel-columns: 4; } .theme-candan-saka .ng-carousel[data-columns="5"] { --ng-carousel-columns: 5; } /* Two across on a tablet and on a phone, as the reference does. */ @media (max-width: 1024px) { .theme-candan-saka .ng-carousel__track { --ng-carousel-columns: 2; gap: 15px; } } /* Hidden until the strip is hovered, and then they SLIDE OUT to their places: each starts 20px towards the middle and gives that margin up as it appears. */ .theme-candan-saka .ng-carousel__arrow { position: absolute; top: 50%; z-index: 10; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: var(--ng-color-text); cursor: pointer; background: var(--ng-color-bg); border: 0; border-radius: var(--ng-radius-pill); box-shadow: 0 4px 16px rgb(0 0 0 / 12%); transform: translateY(-50%); visibility: hidden; transition: all .4s ease-in-out; } .theme-candan-saka .ng-carousel__arrow[data-direction="previous"] { inset-inline-start: 13px; margin-inline-start: 20px; } .theme-candan-saka .ng-carousel__arrow[data-direction="next"] { inset-inline-end: 13px; margin-inline-end: 20px; } .theme-candan-saka .ng-carousel:hover .ng-carousel__arrow { margin: 0; visibility: visible; } /* Its own hover, not the strip's, and black rather than the shop's colour. */ .theme-candan-saka .ng-carousel__arrow:hover { color: #fff !important; background: #000 !important; } /* ── Category cards ──────────────────────────────────────────────────── */ .theme-candan-saka .ng-category-card { position: relative; display: block; color: inherit; text-decoration: none; border-radius: 10px; } /* Dragging the strip puts focus on whichever card the pointer went down on, and the browser's default ring drew a black box round it. Kept for the keyboard, where it is the only way to see where you are. */ .theme-candan-saka .ng-category-card:focus { outline: none; } .theme-candan-saka .ng-category-card:focus-visible { outline: 2px solid var(--ng-color-primary); outline-offset: 2px; } .theme-candan-saka .ng-category-card__media { overflow: hidden; aspect-ratio: 3 / 4; border-radius: 10px; background: var(--ng-color-bg-alt); } .theme-candan-saka .ng-category-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s cubic-bezier(0, 0, .44, 1.18); } .theme-candan-saka .ng-category-card:hover .ng-category-card__image { transform: scale(1.06); } /* The title sits ON the picture near the bottom, as a white PILL that is only as wide as its words - the row it lives in is centred and inset from the card's edges. */ .theme-candan-saka .ng-category-card__name { position: absolute; bottom: 15px; left: 15px; right: 15px; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; } .theme-candan-saka .ng-category-card__name > span { pointer-events: auto; } .theme-candan-saka .ng-category-card__name > span { display: inline-flex; align-items: center; height: 40px; max-width: 100%; padding: 0 22px; overflow: hidden; font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; background: var(--ng-color-bg); border-radius: 999px; transition: all .3s ease-in-out; } .theme-candan-saka .ng-category-card__name > span:hover { color: #fff !important; background: #000 !important; } /* The arrow grows out of nothing on hover rather than sitting there taking room. */ .theme-candan-saka .ng-category-card__icon { width: 0; transform: scale(0); transform-origin: right; transition: all .3s ease-in-out; } .theme-candan-saka .ng-category-card__name > span:hover .ng-category-card__icon { width: 10px; margin-inline-start: 8px; transform: scale(1); } /* ── Free HTML block ─────────────────────────────────────────────────── */ .theme-candan-saka .ng-html { line-height: 1.7; } .theme-candan-saka .ng-html h2 { margin: 24px 0 12px; font-size: 24px; font-weight: 600; } .theme-candan-saka .ng-html p { margin-bottom: 12px; } .theme-candan-saka .ng-html img { max-width: 100%; height: auto; border-radius: var(--ng-radius-md); } /* ── Blog cards ──────────────────────────────────────────────────────── */ .theme-candan-saka .ng-blog-grid { display: grid; gap: var(--ng-space-gap); grid-template-columns: 1fr; } @media (min-width: 768px) { .theme-candan-saka .ng-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .theme-candan-saka .ng-blog-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--ng-radius-md); background: var(--ng-color-bg-alt); } .theme-candan-saka .ng-blog-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .theme-candan-saka .ng-blog-card:hover .ng-blog-card__image { transform: scale(1.04); } .theme-candan-saka .ng-blog-card__body { padding: 12px 2px 0; } .theme-candan-saka .ng-blog-card__title { font-size: 15px; font-weight: 500; line-height: 1.4; } .theme-candan-saka .ng-blog-card__summary { margin-top: 6px; font-size: 13px; color: var(--ng-color-muted); } .theme-candan-saka .ng-newsletter__note { margin-top: 10px; font-size: 13px; color: var(--ng-color-muted); } /* Placeholder for a picture that is missing or still loading. */ .theme-candan-saka .ng-image-empty { display: flex; align-items: center; justify-content: center; background: var(--ng-color-bg-alt); color: var(--ng-color-muted); font-size: 12px; } /* --- Info ticker ------------------------------------------------------------------------- */ /* The band above everything: the primary colour end to end, one line tall, its items drifting by. The component brings the words; everything visual, including the motion, is written here - which is why deleting the theme leaves a plain readable strip, never a broken one. */ .theme-candan-saka .ng-info-ticker { overflow: hidden; /* Black by default rather than the brand colour: the band sits directly above a header that is itself coloured from the panel, and two different brand-ish colours stacked read as a mistake. Neutral underneath whatever the bar wears. */ background: #111111; color: #ffffff; /* The template's own band typography: body face (Albert Sans, from the tokens), 14px/22px at weight 500 - its top-bar text is the body size with the fw-5 utility on it, not a smaller face. Nothing here sets a family, so the theme's font stays the single source. */ font-size: 14px; line-height: 22px; font-weight: 500; } .theme-candan-saka .ng-info-ticker__track { display: inline-flex; gap: 48px; padding: 10px 0; white-space: nowrap; animation: ng-info-ticker-drift 22s linear infinite; } .theme-candan-saka .ng-info-ticker:hover .ng-info-ticker__track { animation-play-state: paused; } .theme-candan-saka .ng-info-ticker__item { padding-inline-start: 48px; } .theme-candan-saka .ng-info-ticker__link { text-decoration: underline; text-underline-offset: 3px; } .theme-candan-saka .ng-info-ticker__link:hover { opacity: 0.8; } @keyframes ng-info-ticker-drift { from { transform: translateX(100vw); } to { transform: translateX(-100%); } } /* Motion is a preference, not a requirement. */ @media (prefers-reduced-motion: reduce) { .theme-candan-saka .ng-info-ticker__track { animation: none; padding-inline-start: 24px; } } /* --- Popup ------------------------------------------------------------------------------- */ /* The component brings the parts and a data-layout saying which it holds; every pixel is decided here. Without this block the modal is unstyled text at the bottom of the page, which reads as "the popup does not show" - it does, it just has no shape. */ .theme-candan-saka .ng-popup-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 17, 17, 0.55); backdrop-filter: blur(2px); } .theme-candan-saka .ng-popup { position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--ng-color-bg); color: var(--ng-color-text); border-radius: var(--ng-radius-lg, 16px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); } .theme-candan-saka .ng-popup__close { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--ng-color-bg); color: var(--ng-color-text); border: 1px solid var(--ng-color-line); } .theme-candan-saka .ng-popup__close:hover { background: var(--ng-color-bg-alt); } .theme-candan-saka .ng-popup__media { width: 100%; } .theme-candan-saka .ng-popup__media img, .theme-candan-saka .ng-popup__media video, .theme-candan-saka .ng-popup__media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 0; } .theme-candan-saka .ng-popup__body { padding: 24px 28px 28px; } .theme-candan-saka .ng-popup__content { font-size: 15px; line-height: 1.6; color: var(--ng-color-muted); } .theme-candan-saka .ng-popup__content p { margin: 0 0 10px; } .theme-candan-saka .ng-popup__actions { display: flex; gap: 10px; margin-top: 18px; } /* Media alone: the frame IS the picture, edge to edge. */ .theme-candan-saka .ng-popup[data-layout="media"] .ng-popup__media img, .theme-candan-saka .ng-popup[data-layout="media"] .ng-popup__media video { aspect-ratio: auto; max-height: calc(100vh - 48px); } @media (max-width: 640px) { .theme-candan-saka .ng-popup-backdrop { padding: 12px; } .theme-candan-saka .ng-popup__body { padding: 18px 20px 22px; } }