/* FameDepot stylesheet — recreated from docs/famedepot_design/design_handoff_famedepot/ (README = token spec). One responsive sheet replaces the prototype's separate desktop/mobile frames. Brand yellow, on-yellow ink and hazard stripes are constant across themes; every neutral rides a --fd-* variable with html.fd-dark overrides. */ :root { --fd-page: #FBF9F3; --fd-card: #FFFFFF; --fd-alt: #F4F1E7; --fd-alt2: #EFEBDE; --fd-hairline: #EEEADC; --fd-border: #E6E1D2; --fd-border2: #D8D2BE; --fd-border3: #E0DAC7; --fd-ink: #1A1913; --fd-body: #3A3728; --fd-mut: #6B6653; --fd-mut2: #96917C; --fd-mut3: #55503C; --fd-mut4: #B4AE99; --fd-link: #A67C00; --fd-gold2: #7A5E00; --fd-band: #F9C80E; --fd-bandsub: #4A4322; --fd-tint: #F7F5EC; --fd-green: #1E7B34; --fd-green-bg: #EAF6EC; --fd-green-bd: #BFE3C6; --fd-red: #8C2A1D; --fd-red-bg: #FDF1EF; --fd-red-bd: #EBC5BE; --fd-amber-bg: #FDF3C7; --fd-amber-bd: #EDD98A; --fd-yellow: #F9C80E; --fd-yellow-hover: #FFD733; --fd-yellow-bd: #D9AE0A; --fd-yellow-bd2: #C29200; /* Contained layout: content caps at the design's 1280px frame (48px inner gutters → 1184px content). Backgrounds/stripes stay full-bleed; 592px = 1280/2 − 48. */ --fd-gutter: max(48px, calc(50% - 592px)); } html.fd-dark { --fd-page: #1B1B1B; --fd-card: #262626; --fd-alt: #212121; --fd-alt2: #303030; --fd-hairline: #343434; --fd-border: #3B3B3B; --fd-border2: #484848; --fd-border3: #484848; --fd-ink: #F2F2F1; --fd-body: #C9C9C5; --fd-mut: #9F9F98; --fd-mut2: #82827B; --fd-mut3: #B7B7B1; --fd-mut4: #696964; --fd-link: #E9BC1B; --fd-gold2: #D9AE0A; --fd-band: #131313; --fd-bandsub: #B7B7B1; --fd-tint: #2E2E2B; --fd-green: #7CCB8F; --fd-green-bg: #20301F; --fd-green-bd: #3A5A3C; --fd-red: #E89083; --fd-red-bg: #362321; --fd-red-bd: #5C3B35; --fd-amber-bg: #35300F; --fd-amber-bd: #5B4F1A; color-scheme: dark; } * { box-sizing: border-box; } /* The pages/JS toggle visibility via the hidden attribute; without this, any element whose class (or inline style) sets display would ignore it. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } /* clip (not hidden): an overflow scroll-container ancestor would break position:sticky. */ html, body { overflow-x: clip; } /* Grid/flex children default to min-width:auto, so intrinsically-wide tile content (service metas, labels) blows the tracks out past the viewport on phones. */ .fd-hero-copy, .fd-hero-right, .fd-builder-inner, .fd-cp-panel, .fd-cp-side, .fd-plat-grid > *, .fd-svc-grid > *, .fd-tier-grid > *, .fd-post-grid > * { min-width: 0; } body { margin: 0; background: var(--fd-page); color: var(--fd-ink); font-family: Archivo, system-ui, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } img { max-width: 100%; } a { color: var(--fd-link); } h1, h2, h3, .fd-display { font-family: Anton, sans-serif; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; margin: 0; } button { font-family: inherit; } /* ── Shared bits ─────────────────────────────────────────────────────── */ .fd-hazard { height: 8px; background: repeating-linear-gradient(-45deg, #F9C80E 0 16px, #1A1913 16px 32px); } .fd-hazard-sm { height: 6px; background: repeating-linear-gradient(-45deg, #F9C80E 0 12px, #1A1913 12px 24px); } .fd-hazard-footer { background: repeating-linear-gradient(-45deg, #F9C80E 0 16px, #16150F 16px 32px); } .fd-badge { display: inline-block; align-self: flex-start; background: #F9C80E; color: #1A1913; font: 700 11px Archivo, sans-serif; letter-spacing: 0.14em; padding: 5px 12px; border-radius: 6px; } .fd-pill { display: inline-block; border: 1px solid var(--fd-border2); background: var(--fd-card); color: var(--fd-link); font: 600 12px Archivo, sans-serif; letter-spacing: 0.14em; padding: 7px 14px; border-radius: 99px; } .fd-btn { display: inline-block; background: #F9C80E; color: #1A1913; border: none; border-radius: 10px; padding: 12px 24px; font: 700 14px Archivo, sans-serif; cursor: pointer; text-decoration: none; text-align: center; transition: background 0.12s ease; } .fd-btn:hover { background: #FFD733; } .fd-btn-block { display: block; width: 100%; border-radius: 12px; padding: 16px 0; font-size: 16px; } .fd-btn-dark { display: inline-block; background: #1A1913; color: #F9C80E; border: none; border-radius: 12px; padding: 18px 36px; font: 700 16px Archivo, sans-serif; cursor: pointer; text-decoration: none; transition: background 0.12s ease; } .fd-btn-dark:hover { background: #2C2A20; } .fd-btn-outline { display: inline-block; background: var(--fd-card); color: var(--fd-ink); border: 1px solid var(--fd-border2); border-radius: 12px; padding: 14px 0; font: 600 15px Archivo, sans-serif; cursor: pointer; transition: border-color 0.12s ease; } .fd-btn-outline:hover { border-color: var(--fd-ink); } .fd-btn-ghost { background: var(--fd-alt); border: 1px solid var(--fd-border2); color: var(--fd-mut); border-radius: 10px; padding: 0 18px; font: 600 13px Archivo, sans-serif; cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease; } .fd-btn-ghost:hover { border-color: var(--fd-ink); color: var(--fd-ink); } .fd-disabled { opacity: 0.45; pointer-events: none; } .fd-input { background: var(--fd-page); border: 1px solid var(--fd-border2); border-radius: 10px; padding: 13px 15px; color: var(--fd-ink); font: 500 15px Archivo, sans-serif; outline: none; width: 100%; } .fd-input:focus { border-color: var(--fd-link); } .fd-chip { display: inline-block; font: 700 10.5px Archivo, sans-serif; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; background: var(--fd-alt); color: var(--fd-mut3); flex-shrink: 0; } .fd-chip-instagram { background: rgba(196,42,111,0.12); color: #C42A6F; } .fd-chip-tiktok { background: rgba(18,164,164,0.12); color: #0F8C8C; } .fd-chip-twitter { background: rgba(40,103,196,0.12); color: #2867C4; } html.fd-dark .fd-chip-instagram { background: rgba(196,42,111,0.22); color: #E877AC; } html.fd-dark .fd-chip-tiktok { background: rgba(18,164,164,0.22); color: #5BC8C8; } html.fd-dark .fd-chip-twitter { background: rgba(40,103,196,0.22); color: #7FA8E0; } @keyframes fdPop { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } } @keyframes fdFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fdDrawerIn { from { transform: translateX(100%); } to { transform: none; } } @keyframes fdPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes fdStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .fd-stepin { animation: fdStepIn 0.25s ease; } .fd-pop { animation: fdPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Hero "fame" chip spark burst — engagement icons fly out on hover (fd.js spawns them). */ @keyframes fdSpark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1) rotate(var(--sr)); } } .fd-spark-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .fd-spark { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; opacity: 0; background-position: center; background-size: contain; background-repeat: no-repeat; animation: fdSpark 0.75s ease var(--sd, 0s) forwards; } /* Cart badge bump on count change (prototype fdBumpA/fdBumpB — one keyframe here, retriggered by fd.js via reflow). */ @keyframes fdBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .fd-bump { animation: fdBump 0.3s ease; } /* Add-to-cart availability pop (the prototype's second fdPop keyframe — scale bounce + expanding yellow ring), fired by JS when the button flips disabled → enabled. */ @keyframes fdBtnPop { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249,200,14,0.65); } 40% { transform: scale(1.12); } 70% { transform: scale(0.97); } 100% { transform: scale(1); box-shadow: 0 0 0 18px rgba(249,200,14,0); } } .fd-btn-pop { animation: fdBtnPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Handle-field attention glow — pulses while the target step waits for input, settles to a static ring on focus, removed by JS once a check runs. */ @keyframes fdGlow { 0%, 100% { box-shadow: 0 0 0 3px rgba(249,200,14,0.30), 0 0 16px rgba(249,200,14,0.35); } 50% { box-shadow: 0 0 0 7px rgba(249,200,14,0.12), 0 0 28px rgba(249,200,14,0.55); } } .fd-handle-glow { border-color: #D9AE0A; animation: fdGlow 1.5s ease-in-out infinite; } .fd-handle-glow:focus { animation: none; box-shadow: 0 0 0 3px rgba(249,200,14,0.28); border-color: var(--fd-link); } @media (prefers-reduced-motion: reduce) { .fd-handle-glow { animation: none; box-shadow: 0 0 0 3px rgba(249,200,14,0.30); } .fd-btn-pop { animation: none; } .fd-spark { animation: none; opacity: 0; } .fd-bump { animation: none; } } /* ── Topbar ──────────────────────────────────────────────────────────── */ .fd-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--fd-gutter); min-height: 76px; flex-wrap: wrap; row-gap: 10px; column-gap: 24px; background: var(--fd-page); } .fd-logo { display: flex; align-items: center; gap: 5px; font-family: Anton, sans-serif; font-size: 26px; letter-spacing: 0.03em; text-decoration: none; } .fd-logo-fame { color: var(--fd-ink); } .fd-logo-depot { background: #F9C80E; color: #1A1913; padding: 0 7px; border-radius: 6px; } .fd-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 34px; font-size: 15px; font-weight: 500; color: var(--fd-mut); } .fd-nav a { color: inherit; text-decoration: none; transition: color 0.15s ease; } .fd-nav a:hover { color: var(--fd-link); } .fd-nav a.fd-nav-active { color: var(--fd-ink); } .fd-topbar-right { display: flex; align-items: center; gap: 16px; } .fd-cart-btn { display: flex; align-items: center; gap: 10px; background: #F9C80E; color: #1A1913; border: none; border-radius: 10px; padding: 11px 20px; font: 700 15px Archivo, sans-serif; cursor: pointer; transition: background 0.12s ease; } .fd-cart-btn:hover { background: #FFD733; } .fd-cart-ic { display: block; width: 19px; height: 19px; flex-shrink: 0; } .fd-cart-badge { background: #1A1913; color: #F9C80E; border-radius: 99px; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; padding: 0 6px; } /* Language switcher (FD-P4) —
dropdown, InstantFans P4 pattern on fd tokens */ .fd-lang { position: relative; flex-shrink: 0; } .fd-lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font: 600 13px Archivo, sans-serif; letter-spacing: 0.04em; color: var(--fd-mut); padding: 7px 10px; border-radius: 8px; user-select: none; } .fd-lang summary::-webkit-details-marker { display: none; } .fd-lang summary::after { content: ''; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); } .fd-lang summary:hover, .fd-lang[open] summary { color: var(--fd-link); background: var(--fd-alt); } .fd-lang[open] summary::after { transform: translateY(-2px) rotate(180deg); } .fd-lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: flex; flex-direction: column; gap: 2px; background: var(--fd-card); border: 1px solid var(--fd-border2); border-radius: 10px; box-shadow: 0 8px 22px rgba(26,25,19,0.14); padding: 6px; min-width: 150px; } .fd-lang-menu a { font-size: 14px; font-weight: 500; color: var(--fd-ink); text-decoration: none; padding: 8px 12px; border-radius: 6px; white-space: nowrap; } .fd-lang-menu a:hover { background: var(--fd-alt); color: var(--fd-link); } .fd-lang-menu a.fd-lang-active { color: var(--fd-link); background: var(--fd-alt); font-weight: 600; } /* Hamburger (mobile/tablet ≤900px — desktop keeps the full nav per the design) */ .fd-burger { display: none; background: none; border: 1.5px solid var(--fd-border2); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; flex-shrink: 0; } .fd-burger span { display: block; width: 18px; height: 2px; background: var(--fd-ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } /* Dark-mode toggle (54×28 pill, sun/moon knob) */ input.fd-dark { appearance: none; -webkit-appearance: none; width: 54px; height: 28px; border-radius: 99px; border: 1.5px solid var(--fd-border2); background: var(--fd-card); position: relative; cursor: pointer; margin: 0; flex-shrink: 0; align-self: center; } input.fd-dark::before { content: "\263E"; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); font-size: 12px; line-height: 1; color: var(--fd-mut2); } input.fd-dark:checked::before { content: "\2600\FE0E"; right: auto; left: 8px; } input.fd-dark::after { content: "\2600\FE0E"; position: absolute; top: 2.5px; left: 3px; width: 20px; height: 20px; border-radius: 99px; background: #F9C80E; border: 1px solid #C29200; box-sizing: border-box; transition: transform 0.18s ease; font-size: 11px; line-height: 18px; text-align: center; color: #1A1913; } input.fd-dark:checked::after { content: "\263E"; transform: translateX(25px); background: #1B1B1B; border-color: #000000; color: #F9C80E; } /* ── Hero + builder ──────────────────────────────────────────────────── */ .fd-hero { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; padding: 56px var(--fd-gutter) 24px; align-items: start; background-image: linear-gradient(rgba(26,25,19,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(26,25,19,0.045) 1px, transparent 1px); background-size: 28px 28px; } html.fd-dark .fd-hero { background-image: linear-gradient(rgba(242,242,241,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(242,242,241,0.04) 1px, transparent 1px); } .fd-hero-copy { display: flex; flex-direction: column; gap: 22px; } .fd-hero h1 { font-size: 68px; line-height: 1.05; text-wrap: pretty; } .fd-h1-outline { color: transparent; -webkit-text-stroke: 2.5px var(--fd-ink); } .fd-h1-chip { position: relative; display: inline-block; color: #1A1913; background: repeating-linear-gradient(-45deg, #F9C80E 0 16px, #EDBA0B 16px 32px); padding: 0 16px 2px; transform: rotate(-2.5deg) translateY(-2px); box-shadow: 0 3px 0 rgba(26,25,19,0.18); border-top: 3px solid #1A1913; border-bottom: 3px solid #1A1913; } .fd-hero-sub { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--fd-mut3); text-wrap: pretty; } .fd-hero-bullets { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--fd-mut); font-weight: 500; } .fd-hero-bullets span { display: flex; align-items: center; gap: 8px; } .fd-hero-bullets i { width: 7px; height: 7px; background: #F9C80E; border: 1px solid #C29200; border-radius: 2px; flex-shrink: 0; } .fd-hero-mascot { align-self: flex-end; width: 340px; margin: -150px -135px 0 0; position: relative; z-index: 2; pointer-events: none; } /* Mascot fills the frame; frame width and right margin are paired (abs(margin) minus width = -205px) so the frame's LEFT edge (the anchor the .fd-rcpt receipts are positioned from) stays fixed when the mascot resizes. */ /* object-position pins the character 24px from the frame's left edge (contain would center him, 61px in) so his wrench arm stops spilling over the builder panel; the frame itself doesn't move. */ .fd-hero-mascot img.fd-mascot { width: 340px; height: 340px; object-fit: contain; object-position: 24px 50%; display: block; margin: 0 0 0 auto; } /* "Live delivery receipts": floating proof cards beside the mascot (replaces the icon scatter). Decorative only (ancestor is pointer-events:none); numbers are illustrative copy. */ @keyframes fdFloatY { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-7px) rotate(var(--r, 0deg)); } } .fd-rcpt { position: absolute; display: flex; align-items: center; gap: 9px; background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 11px; padding: 9px 13px; box-shadow: 0 5px 12px rgba(26, 25, 19, 0.10); font-size: 13px; color: var(--fd-body); white-space: nowrap; animation: fdFloatY 3.6s ease-in-out infinite; } .fd-rcpt strong { color: var(--fd-ink); } .fd-rcpt img { width: 18px; height: 18px; display: block; } .fd-rcpt-dot { width: 8px; height: 8px; background: var(--fd-green); border-radius: 99px; animation: fdPulse 1.6s ease-in-out infinite; flex-shrink: 0; } .fd-rcpt-1 { --r: -2deg; left: -270px; top: 160px; } .fd-rcpt-2 { --r: 1.5deg; left: -210px; top: 220px; animation-delay: 0.6s; } .fd-rcpt-3 { --r: -1deg; left: -250px; top: 280px; animation-delay: 1.1s; } .fd-hero-right { display: flex; flex-direction: column; gap: 14px; } .fd-hero-strip { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13.5px; color: var(--fd-mut); font-weight: 500; flex-wrap: wrap; } .fd-hero-strip .fd-strip-rating { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .fd-hero-strip .fd-strip-rating:hover { color: var(--fd-ink); } .fd-hero-strip .fd-strip-rating:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; } .fd-hero-strip .fd-star { color: #E0A400; font-size: 15px; } .fd-hero-strip .fd-dot { color: var(--fd-border2); } .fd-hero-strip strong { color: var(--fd-ink); } /* Phone-only hero mascot + trust-headline card (replaces the 4-tile strip ≤640px). */ .fd-hero-mascot-m { display: none; align-items: center; gap: 4px; margin-top: -4px; } .fd-hero-mascot-m img { width: 185px; height: 185px; object-fit: contain; flex-shrink: 0; pointer-events: none; } .fd-hero-mini-trust { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 12px; padding: 14px 16px; } .fd-hero-mini-trust span { display: flex; align-items: center; gap: 8px; font-family: Anton, sans-serif; font-size: 13px; letter-spacing: 0.04em; color: var(--fd-ink); } .fd-hero-mini-trust i { width: 7px; height: 7px; background: #F9C80E; border: 1px solid #C29200; border-radius: 2px; flex-shrink: 0; } /* Builder panel */ /* No-JS / initial-load fallback: keep the native anchor jump off the very top edge (JS re-centers when available; see scrollToBuilder in fd.js). */ #build-order { scroll-margin-top: 100px; } .fd-builder { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 18px; box-shadow: 0 24px 48px rgba(26,25,19,0.10); overflow: hidden; } .fd-builder-stripe { height: 7px; background: repeating-linear-gradient(-45deg, #F9C80E 0 14px, #1A1913 14px 28px); } /* Selected-platform tint (design panelStripeStyle) — brighter than the .fd-plat-ico palette so the band pops against the black segments; one set for both themes, like the constant yellow. */ .fd-builder-stripe.fd-stripe-instagram { background: repeating-linear-gradient(-45deg, #FF4D94 0 14px, #1A1913 14px 28px); } .fd-builder-stripe.fd-stripe-tiktok { background: repeating-linear-gradient(-45deg, #25F4EE 0 14px, #1A1913 14px 28px); } .fd-builder-stripe.fd-stripe-twitter { background: repeating-linear-gradient(-45deg, #1DA1F2 0 14px, #1A1913 14px 28px); } .fd-builder-inner { padding: 24px 30px 30px; display: flex; flex-direction: column; gap: 22px; } .fd-progress { display: grid; grid-template-columns: repeat(4, 1fr); padding: 2px 0 4px; } .fd-progress div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; } .fd-progress div::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--fd-hairline); } .fd-progress div:first-child::before { display: none; } .fd-progress .fd-prog-num { width: 27px; height: 27px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font: 700 12.5px Archivo, sans-serif; position: relative; z-index: 1; background: var(--fd-alt); color: var(--fd-mut2); border: 1.5px solid var(--fd-border2); } .fd-progress .on .fd-prog-num { background: #F9C80E; color: #1A1913; border-color: #C29200; } .fd-progress .fd-prog-label { font: 600 10.5px Archivo, sans-serif; letter-spacing: 0.1em; color: var(--fd-mut2); } .fd-progress .on .fd-prog-label { color: var(--fd-ink); } .fd-progress div.on::before { background: #F9C80E; } .fd-bstep-label { font: 700 12px Archivo, sans-serif; letter-spacing: 0.12em; color: var(--fd-mut2); display: inline-flex; align-items: center; gap: 7px; transition: color 0.2s ease; } /* Wayfinding: the current step darkens + gets a brand-yellow marker; finished steps get a green ✓. */ .fd-bstep-label.fd-step-current { color: var(--fd-ink); } .fd-bstep-label.fd-step-current::before { content: ''; width: 8px; height: 8px; background: #F9C80E; border: 1px solid #C29200; border-radius: 2px; flex-shrink: 0; } .fd-bstep-label.fd-step-done::before { content: '✓'; color: var(--fd-green); font-size: 12px; line-height: 1; flex-shrink: 0; } .fd-bgroup { display: flex; flex-direction: column; gap: 12px; } .fd-plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .fd-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--fd-page); border: 1.5px solid var(--fd-border2); border-radius: 12px; padding: 14px 16px; cursor: pointer; text-align: left; color: var(--fd-ink); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .fd-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(26,25,19,0.12); border-color: #D9AE0A; } .fd-tile.sel { border-color: #D9AE0A; background: var(--fd-card); box-shadow: 0 6px 14px rgba(26,25,19,0.10); } .fd-tile .fd-tile-name { font: 700 15px Archivo, sans-serif; display: flex; align-items: center; gap: 8px; } .fd-tile .fd-tile-cap { font-size: 11.5px; font-weight: 500; opacity: 0.75; } .fd-tile .fd-tile-from { font: 700 11.5px Archivo, sans-serif; color: var(--fd-gold2); } .fd-tile .fd-plat-dot { width: 10px; height: 10px; border-radius: 99px; display: inline-block; flex-shrink: 0; background: var(--fd-mut2); } /* Brand icons, tinted via mask (the SVGs hardcode the light ink stroke). JS sets the root-absolute mask-image inline. */ .fd-plat-ico { width: 17px; height: 17px; display: inline-block; flex-shrink: 0; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .fd-plat-ico-instagram { background: #C42A6F; } .fd-plat-ico-tiktok { background: #12A4A4; } .fd-plat-ico-twitter { background: #2867C4; } html.fd-dark .fd-plat-ico-instagram { background: #E877AC; } html.fd-dark .fd-plat-ico-tiktok { background: #5BC8C8; } html.fd-dark .fd-plat-ico-twitter { background: #7FA8E0; } .fd-svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .fd-svc { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--fd-page); border: 1.5px solid var(--fd-border2); border-radius: 12px; padding: 13px 16px; cursor: pointer; color: var(--fd-ink); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .fd-svc:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(26,25,19,0.12); border-color: #D9AE0A; } .fd-svc.sel { border-color: #D9AE0A; background: var(--fd-card); } .fd-svc.restock { border-style: dashed; background: var(--fd-tint); color: var(--fd-mut2); cursor: pointer; } .fd-svc.restock:hover { transform: none; box-shadow: none; border-color: var(--fd-border2); } .fd-svc .fd-svc-name { display: flex; align-items: center; gap: 9px; font: 700 14.5px Archivo, sans-serif; } /* Icon files stroke the light-theme ink — mask + currentColor keeps them visible in dark mode. mask-image arrives inline from JS (root-absolute; see setIcon in fd.js). */ .fd-svc .fd-svc-ico { width: 18px; height: 18px; display: inline-block; flex-shrink: 0; background: currentColor; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .fd-svc .fd-svc-meta { font: 600 11px Archivo, sans-serif; letter-spacing: 0.04em; color: var(--fd-mut2); white-space: nowrap; } .fd-svc.restock .fd-svc-meta { color: var(--fd-gold2); letter-spacing: 0.1em; } .fd-note { display: flex; gap: 14px; align-items: center; background: var(--fd-tint); border: 1px dashed var(--fd-border2); border-radius: 12px; padding: 12px 16px; animation: fdStepIn 0.25s ease; } .fd-note img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; } .fd-note span { font-size: 13.5px; color: var(--fd-mut3); line-height: 1.5; } .fd-note strong { color: var(--fd-ink); } .fd-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .fd-tier { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--fd-page); border: 1.5px solid var(--fd-border2); border-radius: 12px; padding: 12px 15px; cursor: pointer; color: var(--fd-ink); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .fd-tier:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(26,25,19,0.12); border-color: #D9AE0A; } .fd-tier.sel { border-color: #D9AE0A; background: var(--fd-card); box-shadow: 0 6px 14px rgba(26,25,19,0.10); } .fd-tier .fd-tier-qty { font: 700 12.5px Archivo, sans-serif; letter-spacing: 0.03em; opacity: 0.72; } .fd-tier .fd-tier-price { font-family: Anton, sans-serif; font-size: 23px; letter-spacing: 0.02em; } .fd-builder-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--fd-hairline); padding-top: 20px; } .fd-builder-foot .fd-bsummary { font-size: 14px; color: var(--fd-mut); font-weight: 500; } /* Target stage */ .fd-target-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .fd-target-back { cursor: pointer; color: var(--fd-link); font-weight: 600; font-size: 13.5px; background: none; border: none; padding: 0; } .fd-target-chip { background: var(--fd-alt); border: 1px solid var(--fd-border); color: var(--fd-mut3); font: 600 12.5px Archivo, sans-serif; padding: 6px 12px; border-radius: 99px; } .fd-target-prompt { font-size: 14px; color: var(--fd-mut3); } .fd-handle-row { display: flex; gap: 10px; } .fd-handle-row .fd-input { flex: 1; } .fd-check-btn { background: #F9C80E; color: #1A1913; border: none; border-radius: 10px; padding: 0 22px; font: 700 14px Archivo, sans-serif; cursor: pointer; transition: background 0.12s ease; } .fd-check-btn:hover { background: #FFD733; } .fd-status-box { display: flex; align-items: center; gap: 14px; border-radius: 12px; padding: 14px 18px; } .fd-status-box img { width: 62px; height: 62px; object-fit: contain; flex-shrink: 0; } .fd-status-box .fd-status-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .fd-status-loading { background: var(--fd-page); border: 1px solid var(--fd-border); animation: fdPulse 1.2s infinite; color: var(--fd-mut); font-size: 14px; } .fd-status-loading .fd-avatar-ph { width: 44px; height: 44px; border-radius: 99px; background: var(--fd-hairline); flex-shrink: 0; } .fd-status-notfound { background: var(--fd-red-bg); border: 1px solid var(--fd-red-bd); } .fd-status-notfound .t { font-weight: 700; font-size: 14.5px; color: var(--fd-red); display: flex; align-items: center; gap: 8px; } .fd-status-notfound .t i { width: 19px; height: 19px; border-radius: 99px; background: #C0392B; color: #fff; font-style: normal; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; } .fd-status-notfound .b { font-size: 13.5px; color: var(--fd-red); line-height: 1.5; } .fd-status-private { background: var(--fd-amber-bg); border: 1px solid var(--fd-amber-bd); animation: fdStepIn 0.25s ease; } .fd-status-private .t { font-weight: 700; font-size: 14.5px; color: var(--fd-gold2); } .fd-status-private .b { font-size: 13px; color: var(--fd-gold2); line-height: 1.5; } .fd-status-private .fd-btn { padding: 11px 18px; font-size: 13px; flex-shrink: 0; } .fd-found-card { display: flex; align-items: center; gap: 14px; background: var(--fd-page); border: 1px solid var(--fd-border); border-radius: 12px; padding: 16px 18px; } .fd-found-avatar { width: 48px; height: 48px; border-radius: 99px; flex-shrink: 0; background-size: cover; background-position: center; border: 1px dashed rgba(166,124,0,0.45); background-color: var(--fd-alt); } .fd-found-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .fd-found-info .h { font-weight: 700; font-size: 15px; color: var(--fd-ink); overflow: hidden; text-overflow: ellipsis; } .fd-found-info .m { font-size: 13px; color: var(--fd-mut); } .fd-found-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--fd-green); font-weight: 700; font-size: 13px; background: var(--fd-green-bg); border: 1px solid var(--fd-green-bd); padding: 6px 12px; border-radius: 99px; flex-shrink: 0; } .fd-found-fresh { display: flex; align-items: center; gap: 12px; margin-top: -8px; font-size: 12.5px; color: var(--fd-mut); } .fd-found-fresh button { cursor: pointer; color: var(--fd-link); font-weight: 600; font-size: 12.5px; background: none; border: none; padding: 0; } .fd-found-fresh button[disabled] { color: var(--fd-mut); opacity: 0.65; cursor: default; } .fd-post-prompt { font-size: 14px; color: var(--fd-mut3); font-weight: 600; } .fd-post-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .fd-post { position: relative; aspect-ratio: 1; border-radius: 10px; cursor: pointer; overflow: hidden; border: 1.5px dashed rgba(166,124,0,0.4); background: var(--fd-tint); background-size: cover; background-position: center; padding: 6px; display: flex; align-items: flex-end; color: var(--fd-link); } /* Selection must read over any thumbnail: a card-colored inner ring separates the yellow border from the photo edge, and an ink badge with a yellow check is the opaque signal that survives photos the border can't win against. */ .fd-post.sel { border: 3px solid #D9AE0A; box-shadow: inset 0 0 0 2px var(--fd-card), 0 0 0 3px rgba(249,200,14,0.3); } .fd-post.sel::after { content: ''; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.35); background: rgba(26,25,19,0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9C80E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } .fd-post.sel .fd-post-count { background: #F9C80E; color: #1A1913; } .fd-post.off { opacity: 0.45; cursor: not-allowed; } .fd-post .fd-post-count { font: 600 10.5px ui-monospace, monospace; background: rgba(26,25,19,0.72); color: #F9C80E; border-radius: 6px; padding: 2px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fd-post .fd-post-text { font: 500 10.5px Archivo, sans-serif; color: var(--fd-mut3); overflow: hidden; align-self: flex-start; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .fd-target-err { font-size: 13px; color: #C0392B; font-weight: 500; } /* ── Trust strip ─────────────────────────────────────────────────────── */ .fd-trust { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--fd-border); border-top: 1px solid var(--fd-border); border-bottom: 1px solid var(--fd-border); } .fd-trust div { background: var(--fd-card); padding: 24px 28px; display: flex; flex-direction: column; gap: 6px; } .fd-trust .t { font-family: Anton, sans-serif; font-size: 16px; letter-spacing: 0.04em; color: var(--fd-ink); } .fd-trust .b { font-size: 13px; color: var(--fd-mut); line-height: 1.5; } /* ── Aisle sections ──────────────────────────────────────────────────── */ .fd-section { padding: 72px var(--fd-gutter); display: flex; flex-direction: column; gap: 32px; } .fd-section-alt { background: var(--fd-alt); } .fd-section-head { display: flex; flex-direction: column; gap: 10px; } .fd-section h2, .fd-faq-teaser h2, .fd-contact h2 { font-size: 34px; } .fd-section-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .fd-seeall { color: var(--fd-link); font-weight: 600; font-size: 15px; text-decoration: none; } .fd-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .fd-card { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 2px 6px rgba(26,25,19,0.04); transition: transform 0.15s ease, box-shadow 0.15s ease; color: var(--fd-ink); text-decoration: none; } .fd-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(26,25,19,0.10); } .fd-card .fd-num { font-family: Anton, sans-serif; font-size: 44px; color: var(--fd-link); } .fd-card .fd-card-t { font-family: Anton, sans-serif; font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fd-ink); } .fd-card .fd-card-b { font-size: 14px; color: var(--fd-mut); line-height: 1.6; } .fd-stars { color: #E0A400; font-size: 16px; letter-spacing: 3px; } .fd-stars .off { opacity: 0.3; } .fd-review-q { font-size: 14.5px; line-height: 1.65; color: var(--fd-body); text-wrap: pretty; } .fd-review-a { font-size: 13px; color: var(--fd-mut2); font-weight: 500; } .fd-reviews-mascot { height: 195px; width: auto; display: block; flex-shrink: 0; margin: -44px 0 -40px 16px; position: relative; z-index: 2; } .fd-reviews-meta { font-size: 14px; color: var(--fd-mut); margin-left: auto; } .fd-reviews-meta strong { color: var(--fd-link); font-weight: 700; } /* Shelves (Aisle 02) — service-catalog cards. The header row reuses the reviews-aisle mascot/meta styles above (that section is dormant, not gone). */ .fd-shelf-card { gap: 14px; } .fd-shelf-plat { font-family: Anton, sans-serif; font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fd-ink); display: flex; align-items: center; gap: 10px; } .fd-shelf-plat .fd-plat-ico { width: 20px; height: 20px; } .fd-shelf-rows { display: flex; flex-direction: column; } .fd-shelf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--fd-border); } .fd-shelf-row:last-child { border-bottom: 0; } .fd-shelf-row .s { font-size: 14px; font-weight: 500; color: var(--fd-body); display: flex; align-items: center; gap: 8px; } .fd-shelf-ico { width: 15px; height: 15px; flex-shrink: 0; background: currentColor; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .fd-shelf-row .p { background: var(--fd-alt); color: var(--fd-link); font: 700 11px Archivo, sans-serif; padding: 3px 9px; border-radius: 5px; white-space: nowrap; } .fd-shelf-row.restock .s { color: var(--fd-mut2); } .fd-shelf-row.restock .p { background: var(--fd-tint); color: var(--fd-mut2); font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; } a.fd-shelf-row { color: inherit; text-decoration: none; transition: padding 0.15s ease; } a.fd-shelf-row:hover { padding-left: 6px; } a.fd-shelf-row:hover .s { color: var(--fd-link); } .fd-shelf-cta { margin-top: auto; align-self: flex-start; color: var(--fd-link); font-weight: 600; font-size: 14.5px; text-decoration: none; } .fd-shelf-cta:hover { text-decoration: underline; text-underline-offset: 3px; } /* FAQ teaser */ .fd-faq-teaser { padding: 0 var(--fd-gutter) 80px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; } .fd-faq-teaser-left { display: flex; flex-direction: column; gap: 12px; } .fd-faq-rows { display: flex; flex-direction: column; } .fd-faq-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--fd-border); text-decoration: none; transition: padding 0.15s ease; } .fd-faq-row:hover { padding-left: 6px; } .fd-faq-row .q { font-size: 16px; font-weight: 600; color: var(--fd-ink); } .fd-faq-row .a { color: var(--fd-link); } /* News teaser cards */ .fd-news-card { padding: 24px 26px; gap: 10px; } .fd-news-card .fd-tag { align-self: flex-start; background: var(--fd-alt); color: var(--fd-link); font: 700 10.5px Archivo, sans-serif; letter-spacing: 0.1em; padding: 4px 9px; border-radius: 5px; } .fd-news-card .fd-news-t { font-size: 16.5px; font-weight: 700; color: var(--fd-ink); line-height: 1.35; text-wrap: pretty; } .fd-news-card .fd-news-m { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--fd-mut2); margin-top: auto; } /* Contact */ .fd-contact { padding: 72px var(--fd-gutter); background: var(--fd-alt); border-top: 1px solid var(--fd-border); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; } .fd-contact-left { display: flex; flex-direction: column; gap: 14px; position: relative; } .fd-contact-left p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fd-mut); max-width: 400px; text-wrap: pretty; } .fd-contact-mascot { width: 205px; height: 205px; object-fit: contain; display: block; position: absolute; top: -12px; right: -58px; } .fd-contact-card { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 16px; padding: 28px; box-shadow: 0 12px 28px rgba(26,25,19,0.07); } .fd-form { display: flex; flex-direction: column; gap: 14px; } .fd-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fd-field { display: flex; flex-direction: column; gap: 6px; } .fd-field label { font: 600 12.5px Archivo, sans-serif; color: var(--fd-mut3); } .fd-field label .opt { color: var(--fd-mut4); font-weight: 500; } .fd-field textarea { min-height: 110px; resize: vertical; font-family: Archivo, sans-serif; } .fd-captcha-row { display: flex; gap: 10px; align-items: center; } .fd-captcha-q { display: inline-flex; align-items: center; height: 46px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--fd-border); background: repeating-linear-gradient(-45deg, var(--fd-alt) 0 10px, var(--fd-card) 10px 20px); font: 700 16px ui-monospace, monospace; color: var(--fd-ink); letter-spacing: 0.08em; } .fd-captcha-row .fd-input { width: 90px; flex: none; } .fd-form-err { font-size: 13px; color: #C0392B; font-weight: 500; } .fd-form-note { font-size: 12px; color: var(--fd-mut2); text-align: center; } .fd-form-sent { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 20px; text-align: center; animation: fdStepIn 0.3s ease; } .fd-form-sent .ok { width: 52px; height: 52px; border-radius: 99px; background: var(--fd-green-bg); border: 1.5px solid var(--fd-green-bd); color: var(--fd-green); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; } .fd-form-sent .t { font-family: Anton, sans-serif; font-size: 24px; letter-spacing: 0.03em; color: var(--fd-ink); } .fd-form-sent .b { font-size: 14px; color: var(--fd-mut); line-height: 1.5; } .fd-form-sent a { color: var(--fd-link); font-weight: 600; font-size: 14px; text-decoration: none; } /* ── CTA band ────────────────────────────────────────────────────────── */ .fd-cta { background: var(--fd-band); padding: 52px var(--fd-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; } .fd-cta-copy { display: flex; flex-direction: column; gap: 8px; } .fd-cta-copy .t { font-family: Anton, sans-serif; font-size: 42px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--fd-ink); } html:not(.fd-dark) .fd-cta-copy .t { color: #1A1913; } .fd-cta-copy .s { font-size: 15.5px; color: var(--fd-bandsub); font-weight: 500; } .fd-cta img { height: 158px; width: auto; display: block; flex-shrink: 0; margin: -36px 0 -36px 0; } .fd-cta .fd-btn-dark { margin-left: auto; } /* ── Footer ──────────────────────────────────────────────────────────── */ .fd-footer { background: #16150F; color: #B0AB96; margin-top: auto; } .fd-footer-grid { padding: 48px var(--fd-gutter); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .fd-footer-brand { display: flex; flex-direction: column; gap: 14px; } .fd-footer-logo { height: 46px; width: auto; align-self: flex-start; } .fd-footer-blurb { font-size: 13px; color: #8B8672; line-height: 1.6; max-width: 280px; } .fd-footer-pay { display: flex; gap: 8px; flex-wrap: wrap; } .fd-footer-pay span { border: 1px solid #33301F; color: #8B8672; font: 600 10px Archivo, sans-serif; padding: 4px 8px; border-radius: 4px; letter-spacing: 0.06em; } .fd-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; } .fd-footer-h { font: 600 11px Archivo, sans-serif; letter-spacing: 0.12em; color: #8B8672; } .fd-footer-col a { color: #B0AB96; text-decoration: none; transition: color 0.15s ease; } .fd-footer-col a:hover { color: #F9C80E; } .fd-footer-soon { color: #56523F; } .fd-footer-bottom { padding: 18px var(--fd-gutter) 28px; font-size: 12px; color: #56523F; } /* ── Cart drawer ─────────────────────────────────────────────────────── */ .fd-drawer-wrap { position: fixed; inset: 0; z-index: 50; } .fd-drawer-backdrop { position: absolute; inset: 0; background: rgba(26,25,19,0.4); animation: fdFadeIn 0.2s; } .fd-drawer { position: absolute; top: 0; right: 0; width: 430px; max-width: 92vw; height: 100vh; height: 100dvh; background: var(--fd-card); border-left: 1px solid var(--fd-border); display: flex; flex-direction: column; animation: fdDrawerIn 0.25s ease; box-shadow: -30px 0 60px rgba(26,25,19,0.25); padding-top: env(safe-area-inset-top, 0px); } .fd-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; } .fd-drawer-title { display: flex; align-items: baseline; gap: 10px; } .fd-drawer-title span:first-child { font-family: Anton, sans-serif; font-size: 22px; letter-spacing: 0.03em; color: var(--fd-ink); } .fd-drawer-count { font-size: 13px; color: var(--fd-mut2); } .fd-drawer-x { background: none; border: 1px solid var(--fd-border2); color: var(--fd-mut); border-radius: 8px; width: 34px; height: 34px; font-size: 16px; cursor: pointer; transition: color 0.12s, border-color 0.12s; } .fd-drawer-x:hover { color: var(--fd-ink); border-color: var(--fd-ink); } .fd-drawer-body { flex: 1; overflow: auto; padding: 8px 26px; } .fd-drawer-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 20px; text-align: center; } .fd-drawer-empty img { width: 185px; height: 185px; object-fit: contain; } .fd-drawer-empty-t { font-family: Anton, sans-serif; font-size: 20px; letter-spacing: 0.03em; color: var(--fd-ink); } .fd-drawer-empty-s { font-size: 14px; color: var(--fd-mut); } .fd-ci { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--fd-hairline); align-items: center; } .fd-ci-thumb { width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; background-size: cover; background-position: center; background-color: var(--fd-alt); border: 1px solid var(--fd-border); } .fd-ci-thumb-empty { background-image: repeating-linear-gradient(-45deg, rgba(249,200,14,0.18) 0 6px, rgba(26,25,19,0.03) 6px 12px); } .fd-ci-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .fd-ci-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fd-ci-name { font-size: 14.5px; font-weight: 600; color: var(--fd-ink); } .fd-ci-target { font-size: 12.5px; color: var(--fd-mut2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fd-ci-price { font-size: 15px; font-weight: 700; color: var(--fd-ink); } .fd-ci-remove { background: none; border: none; color: var(--fd-mut4); font-size: 15px; cursor: pointer; padding: 4px; transition: color 0.12s; } .fd-ci-remove:hover { color: #C0392B; } .fd-ci-stale { font-size: 12px; line-height: 1.35; color: var(--fd-gold2); background: var(--fd-amber-bg); border: 1px solid var(--fd-amber-bd); border-radius: 8px; padding: 5px 8px; white-space: normal; } .fd-drawer-foot { padding: 20px 26px 26px; border-top: 1px solid var(--fd-border); display: flex; flex-direction: column; gap: 14px; background: var(--fd-page); } .fd-promo-row { display: flex; gap: 10px; } .fd-promo-row .fd-input, .fd-promo-row input { flex: 1; background: var(--fd-card); border: 1px solid var(--fd-border2); border-radius: 10px; padding: 12px 14px; color: var(--fd-ink); font: 500 14px Archivo, sans-serif; outline: none; min-width: 0; } .fd-promo-row input:focus { border-color: var(--fd-link); } .fd-promo-err { font-size: 12.5px; color: #C0392B; } .fd-drawer-subtotal { display: flex; justify-content: space-between; align-items: baseline; } .fd-drawer-subtotal span:first-child { font-size: 14px; color: var(--fd-mut); } .fd-drawer-total { font-family: Anton, sans-serif; font-size: 26px; color: var(--fd-ink); } .fd-drawer-viewcart { color: var(--fd-link); font: 600 13.5px Archivo, sans-serif; text-align: center; text-decoration: none; } .fd-drawer-note { font-size: 12px; color: var(--fd-mut2); text-align: center; line-height: 1.5; } .fd-drawer-note-m { display: none; } /* ── Page hero (subpages) ────────────────────────────────────────────── */ .fd-page-hero { padding: 56px var(--fd-gutter) 40px; display: flex; flex-direction: column; gap: 14px; } .fd-page-hero h1 { font-size: 42px; } .fd-page-hero .sub { font-size: 15.5px; color: var(--fd-mut); max-width: 640px; line-height: 1.6; text-wrap: pretty; } /* ── Cart page ───────────────────────────────────────────────────────── */ .fd-keep-building { color: var(--fd-link); font: 600 15px Archivo, sans-serif; text-decoration: none; } .fd-cp-head { padding: 44px var(--fd-gutter) 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .fd-cp-head h1 { font-size: 46px; position: relative; } .fd-cp-meta { font-size: 14px; color: var(--fd-mut2); padding-bottom: 6px; } /* mascot hangs off the title text (horizontal = static position via the inline anchor, vertical = h1 bottom); absolute so he never adds height to the head. bottom -34px = head pad 28 + panel border 1 + tape 5 -> boots land on the panel's hazard tape. */ .fd-cp-mascot-anchor { display: inline-block; width: 0; } .fd-cp-mascot { position: absolute; bottom: -34px; height: 150px; width: auto; max-width: none; margin-left: 14px; pointer-events: none; } .fd-cp-grid { display: grid; grid-template-columns: 1fr 390px; gap: 24px; padding: 0 var(--fd-gutter) 64px; align-items: start; } .fd-cp-panel { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 28px rgba(26,25,19,0.07); } .fd-cp-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 64px 20px; text-align: center; } .fd-cp-empty img { width: 170px; height: 170px; object-fit: contain; } .fd-cp-empty .t { font-family: Anton, sans-serif; font-size: 24px; letter-spacing: 0.03em; color: var(--fd-ink); } .fd-cp-empty .s { font-size: 14.5px; color: var(--fd-mut); } .fd-cp-list { padding: 4px 26px 8px; } .fd-cp-list .fd-ci { padding: 20px 0; gap: 16px; } .fd-cp-list .fd-ci-name { font-size: 15.5px; font-weight: 700; } .fd-cp-list .fd-ci-price { font-size: 16px; } .fd-cp-list .fd-ci-remove { border: 1px solid var(--fd-border); border-radius: 8px; width: 32px; height: 32px; font-size: 14px; color: var(--fd-mut2); } .fd-cp-list .fd-ci-remove:hover { color: #C0392B; border-color: #C0392B; } .fd-cp-addrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0 18px; flex-wrap: wrap; } .fd-cp-addrow a { color: var(--fd-link); font: 600 14px Archivo, sans-serif; text-decoration: none; } .fd-cp-addrow span { font-size: 13px; color: var(--fd-mut2); } .fd-cp-side { display: flex; flex-direction: column; gap: 14px; } .fd-cp-summary { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 12px 28px rgba(26,25,19,0.07); } .fd-cp-summary-t { font-family: Anton, sans-serif; font-size: 20px; letter-spacing: 0.03em; color: var(--fd-ink); } .fd-cp-promo { display: flex; flex-direction: column; gap: 8px; } .fd-cp-totals { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--fd-hairline); padding-top: 16px; } .fd-cp-totals .row { display: flex; justify-content: space-between; font-size: 14px; color: var(--fd-mut); } .fd-cp-totals .row .v { font-weight: 600; color: var(--fd-ink); } .fd-cp-totals .row.total { align-items: baseline; padding-top: 4px; } .fd-cp-totals .row.total span:first-child { font-size: 15px; font-weight: 600; color: var(--fd-ink); } .fd-cp-total { font-family: Anton, sans-serif; font-size: 30px; color: var(--fd-ink); } .fd-cp-badges { display: flex; justify-content: center; gap: 16px; font-size: 12px; color: var(--fd-mut); font-weight: 500; flex-wrap: wrap; } .fd-cp-badges span { display: flex; align-items: center; gap: 6px; } .fd-cp-badges i { width: 6px; height: 6px; background: #F9C80E; border: 1px solid #C29200; border-radius: 2px; } /* ── Slim subpage footer ─────────────────────────────────────────────── */ .fd-footer-slim-row { padding: 28px var(--fd-gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .fd-footer-slim-links { display: flex; gap: 22px; font-size: 13px; flex-wrap: wrap; } .fd-footer-slim-links a { color: #B0AB96; text-decoration: none; transition: color 0.15s ease; } .fd-footer-slim-links a:hover { color: #F9C80E; } .fd-footer-slim-c { font-size: 12px; color: #56523F; } .fd-footer-note { font-size: 13px; color: #8B8672; text-align: center; } /* ── FAQ page ────────────────────────────────────────────────────────── */ .fd-faq-hero, .fd-legal-hero { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; } .fd-faq-mascot { width: 170px; height: 170px; object-fit: contain; margin-bottom: -8px; } /* News mascot rides inside the section head, beside the h1 (not at the hero's far right like faq/legal): title wraps on narrow screens, mascot stays put. The negative margins keep the 140px art from setting the row height (it would gap title↔sub); the leftover hangs up into the hero's empty air, feet dip 8px like the legal mascot. */ .fd-news-titlerow { display: flex; align-items: center; gap: 18px; } .fd-news-mascot { width: 140px; height: 140px; object-fit: contain; margin: -68px 0 -8px; } .fd-legal-mascot { width: 170px; height: 170px; object-fit: contain; margin-bottom: -8px; } /* ── 404 page (FD-P4) ──────────────────────────────────────────────────── */ .fd-nf-hero { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 64px; } .fd-nf-mascot { width: 170px; height: 170px; object-fit: contain; margin-bottom: -8px; } .fd-nf-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .fd-nf-ctas .fd-btn-outline { padding: 12px 24px; } .fd-faq-grid { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 8px var(--fd-gutter) 72px; align-items: start; } .fd-faq-side { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 16px; } .fd-faq-cat { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--fd-card); border: 1.5px solid var(--fd-border3); border-radius: 12px; padding: 13px 16px; cursor: pointer; transition: border-color 0.12s ease; } .fd-faq-cat:hover { border-color: #D9AE0A; } .fd-faq-cat.sel { background: #F9C80E; border-color: #D9AE0A; } .fd-faq-cat .l { font: 700 15px Archivo, sans-serif; color: var(--fd-ink); } .fd-faq-cat.sel .l { color: #1A1913; } .fd-faq-cat .c { font-size: 12px; font-weight: 500; color: var(--fd-ink); opacity: 0.7; } .fd-faq-cat.sel .c { color: #4A4322; } .fd-faq-pills { display: none; } .fd-faq-pill { padding: 11px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; font: 700 13px Archivo, sans-serif; background: var(--fd-card); color: var(--fd-mut); border: 1.5px solid var(--fd-border3); flex-shrink: 0; min-height: 44px; } .fd-faq-pill.sel { background: #F9C80E; color: #1A1913; border-color: #D9AE0A; } .fd-faq-help { background: var(--fd-alt); border: 1px solid var(--fd-border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .fd-faq-help .t { font-weight: 700; font-size: 13.5px; color: var(--fd-ink); } .fd-faq-help a { color: var(--fd-link); font: 600 13px Archivo, sans-serif; text-decoration: none; } .fd-faq-help-m { display: none; } .fd-faq-list { display: flex; flex-direction: column; } .fd-faq-item { border-bottom: 1px solid var(--fd-border); } .fd-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; background: none; border: none; padding: 20px 0; cursor: pointer; text-align: left; } .fd-faq-qtext { font-size: 16px; font-weight: 600; color: var(--fd-ink); display: flex; align-items: center; gap: 10px; } /* Long questions wrap inside this span, beside the pill — as a bare text node they were a max-content flex item that dropped whole onto the next flex line. */ .fd-faq-qtitle { min-width: 0; } .fd-faq-tag { font: 700 9.5px ui-monospace, monospace; letter-spacing: 0.08em; color: var(--fd-link); border: 1px solid var(--fd-border2); border-radius: 4px; padding: 2px 6px; flex-shrink: 0; } .fd-faq-chev { color: var(--fd-link); font-size: 17px; flex-shrink: 0; transition: transform 0.2s ease; } .fd-faq-item.open .fd-faq-chev { transform: rotate(90deg); } .fd-faq-a { display: none; padding: 0 0 22px; } .fd-faq-item.open .fd-faq-a { display: block; animation: fdStepIn 0.25s ease; } .fd-faq-a p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--fd-body); max-width: 640px; } .fd-faq-a a { color: var(--fd-link); font-weight: 600; font-size: 14px; text-decoration: none; display: inline-block; margin-top: 8px; } /* ── News page ───────────────────────────────────────────────────────── */ .fd-news-wrap { padding: 8px var(--fd-gutter) 72px; display: flex; flex-direction: column; gap: 24px; } .fd-news-pills { display: flex; gap: 10px; flex-wrap: wrap; } .fd-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } /* 2:1 matches the fd_cover_url() crop ratio — a fixed height here would re-crop the already-cropped image and cut the mascot again (the pre-2026-07 bug). */ .fd-news-cover { aspect-ratio: 2 / 1; border-radius: 9px; display: block; background: repeating-linear-gradient(-45deg, var(--fd-alt) 0 14px, var(--fd-alt2) 14px 28px); border: 1px solid var(--fd-border); margin-bottom: 4px; } img.fd-news-cover { width: 100%; object-fit: cover; } .fd-news-x { font-size: 13.5px; color: var(--fd-mut); line-height: 1.55; } .fd-news-empty { margin: 0; font-size: 15px; color: var(--fd-mut); padding: 24px 0; } /* ── Article page ────────────────────────────────────────────────────── */ .fd-article { max-width: 800px; margin: 0 auto; padding: 40px 48px 64px; display: flex; flex-direction: column; gap: 28px; } .fd-article-back { color: var(--fd-link); font: 600 14px Archivo, sans-serif; text-decoration: none; align-self: flex-start; } .fd-article-head { display: flex; flex-direction: column; gap: 12px; } .fd-article-head .fd-tag { align-self: flex-start; background: var(--fd-alt); color: var(--fd-link); font: 700 11px Archivo, sans-serif; letter-spacing: 0.1em; padding: 5px 10px; border-radius: 5px; } .fd-article-head h1 { font-size: 40px; line-height: 1.15; text-wrap: pretty; } .fd-article-stand { margin: 0; font-size: 17px; line-height: 1.55; color: var(--fd-mut); text-wrap: pretty; } .fd-article-byline { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--fd-mut2); } .fd-article-cover { aspect-ratio: 2 / 1; border-radius: 14px; border: 1px solid var(--fd-border); background: repeating-linear-gradient(-45deg, var(--fd-alt) 0 16px, var(--fd-alt2) 16px 32px); display: flex; align-items: center; justify-content: center; } .fd-article-cover span { font-family: ui-monospace, monospace; font-size: 12px; color: var(--fd-mut2); } img.fd-article-cover { width: 100%; object-fit: cover; } .fd-article-body { display: flex; flex-direction: column; gap: 20px; } .fd-article-body p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--fd-body); text-wrap: pretty; } .fd-article-body h3 { margin: 8px 0 0; font-size: 19px; letter-spacing: 0.03em; } .fd-article-body ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .fd-article-body li { font-size: 15.5px; line-height: 1.8; color: var(--fd-body); text-wrap: pretty; } .fd-article-body blockquote { margin: 0; border-left: 3px solid var(--fd-link); background: var(--fd-alt); border-radius: 0 12px 12px 0; padding: 16px 22px; font-size: 16.5px; line-height: 1.7; font-weight: 500; color: var(--fd-ink); text-wrap: pretty; } .fd-article-body figure { margin: 0; display: flex; flex-direction: column; gap: 8px; } .fd-article-body figure img { width: 100%; border-radius: 12px; border: 1px solid var(--fd-border); display: block; } .fd-article-body figcaption { font-family: ui-monospace, monospace; font-size: 12px; color: var(--fd-mut2); } .fd-article-body p a, .fd-article-body li a, .fd-article-body blockquote a { color: var(--fd-link); font-weight: 600; text-decoration: none; } .fd-article-body p a:hover, .fd-article-body li a:hover, .fd-article-body blockquote a:hover { text-decoration: underline; text-underline-offset: 3px; } .fd-article-callout { background: var(--fd-alt); border: 1px solid var(--fd-border); border-radius: 12px; padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; } .fd-article-callout .l { font: 700 12px Archivo, sans-serif; letter-spacing: 0.1em; color: var(--fd-link); } .fd-article-callout .b { font-size: 15px; line-height: 1.65; color: var(--fd-body); text-wrap: pretty; } .fd-article-cta { align-self: flex-start; border-radius: 12px; padding: 15px 28px; font-size: 15px; } .fd-article-related { border-top: 1px solid var(--fd-border); padding-top: 22px; display: flex; flex-direction: column; gap: 12px; } .fd-article-kr { font: 700 12px Archivo, sans-serif; letter-spacing: 0.12em; color: var(--fd-mut2); } .fd-article-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fd-article-related-grid a { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .fd-article-related-grid a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(26,25,19,0.10); } .fd-article-related-grid .t { font: 700 10px Archivo, sans-serif; letter-spacing: 0.1em; color: var(--fd-link); } .fd-article-related-grid .n { font-size: 14.5px; font-weight: 700; color: var(--fd-ink); line-height: 1.4; } /* ── Legal page ──────────────────────────────────────────────────────── */ .fd-legal-grid { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 8px var(--fd-gutter) 72px; align-items: start; } .fd-legal-side { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 16px; } .fd-legal-tab { display: flex; flex-direction: column; gap: 3px; background: var(--fd-card); border: 1.5px solid var(--fd-border3); border-radius: 12px; padding: 13px 16px; text-decoration: none; transition: border-color 0.12s ease; } .fd-legal-tab .l { font: 700 15px Archivo, sans-serif; color: var(--fd-ink); } .fd-legal-tab .s { display: none; font: 700 13px Archivo, sans-serif; color: var(--fd-ink); } .fd-legal-tab .c { font-size: 12px; font-weight: 500; color: var(--fd-ink); opacity: 0.7; } .fd-legal-tab.sel .l, .fd-legal-tab.sel .s { color: #1A1913; } .fd-legal-tab.sel .c { color: #4A4322; opacity: 1; } .fd-legal-tab:hover { border-color: #D9AE0A; } .fd-legal-tab.sel { background: #F9C80E; border-color: #D9AE0A; color: #1A1913; } .fd-legal-doc { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 28px rgba(26,25,19,0.07); } .fd-legal-inner { padding: 36px 44px 44px; display: flex; flex-direction: column; gap: 10px; } .fd-legal-inner h2 { font-size: 26px; } .fd-legal-updated { font-family: ui-monospace, monospace; font-size: 12px; color: var(--fd-mut2); } .fd-legal-text { font-size: 14.5px; line-height: 1.75; color: var(--fd-body); overflow-wrap: break-word; } .fd-legal-text a { color: var(--fd-link); } /* ── Done page (order complete) ──────────────────────────────────────── */ /* Own media queries at the end of this section — keep them here, not in the global Responsive block, so the page's rules stay self-contained. */ .fd-dn-hero { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 56px var(--fd-gutter) 40px; text-align: center; background-image: linear-gradient(rgba(26,25,19,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(26,25,19,0.045) 1px, transparent 1px); background-size: 28px 28px; } html.fd-dark .fd-dn-hero { background-image: linear-gradient(rgba(242,242,241,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(242,242,241,0.05) 1px, transparent 1px); } .fd-dn-hero img.fd-dn-mascot { width: 260px; height: 220px; object-fit: contain; display: block; animation: fdStepIn 0.4s ease; } .fd-dn-pill { border: 1px solid var(--fd-border2); background: var(--fd-card); color: var(--fd-link); font: 600 12px Archivo, sans-serif; letter-spacing: 0.14em; padding: 7px 14px; border-radius: 99px; } .fd-dn-hero h1 { margin: 0; font-family: Anton, sans-serif; font-weight: 400; font-size: 54px; line-height: 1.06; letter-spacing: 0.01em; text-transform: uppercase; color: var(--fd-ink); max-width: 700px; text-wrap: pretty; } .fd-dn-ribbon { position: relative; height: 34px; width: 430px; max-width: 86vw; } .fd-dn-ribbon span { position: absolute; width: 48%; height: 15px; border-radius: 3px; background: repeating-linear-gradient(-45deg, #F9C80E 0 12px, #1A1913 12px 24px); box-shadow: 0 2px 0 rgba(26,25,19,0.15); } .fd-dn-ribbon span:first-child { left: 0; top: 11px; transform: rotate(5deg); } .fd-dn-ribbon span:last-child { right: 0; top: 6px; transform: rotate(-7deg); } .fd-dn-sub { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--fd-mut3); max-width: 560px; text-wrap: pretty; } .fd-dn-sub strong { color: var(--fd-ink); } .fd-dn-sub .m { display: none; } .fd-dn-main { display: flex; justify-content: center; padding: 0 var(--fd-gutter) 56px; } .fd-dn-col { width: 780px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; } .fd-dn-card { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 28px rgba(26,25,19,0.07); } .fd-dn-card-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; } .fd-dn-card-head .t { font-family: Anton, sans-serif; font-size: 20px; letter-spacing: 0.03em; color: var(--fd-ink); } .fd-dn-card-head .n { font-size: 13px; color: var(--fd-mut2); } .fd-dn-card-head .n .m { display: none; } .fd-dn-note { margin: 16px 26px 4px; padding: 12px 16px; border-radius: 10px; font-size: 13px; line-height: 1.55; color: var(--fd-gold2); background: var(--fd-amber-bg); border: 1px solid var(--fd-amber-bd); } .fd-dn-list { padding: 6px 26px 8px; } .fd-dn-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--fd-hairline); align-items: center; } .fd-dn-thumb { width: 46px; height: 46px; flex-shrink: 0; border-radius: 8px; border: 1px dashed rgba(166,124,0,0.45); background: repeating-linear-gradient(45deg, rgba(249,200,14,0.18) 0 6px, rgba(26,25,19,0.03) 6px 12px); background-size: cover; background-position: center; } .fd-dn-thumb.round { border-radius: 999px; } .fd-dn-thumb.has-photo { border-style: solid; border-color: var(--fd-border2); } .fd-dn-item .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .fd-dn-item .line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fd-dn-item .name { font-size: 14.5px; font-weight: 600; color: var(--fd-ink); } .fd-dn-item .target { font-size: 12.5px; color: var(--fd-mut2); overflow-wrap: anywhere; } .fd-dn-item .price { font-size: 15px; font-weight: 700; color: var(--fd-ink); text-align: right; white-space: nowrap; } .fd-dn-chip { font: 700 11px Archivo, sans-serif; padding: 3px 10px; border-radius: 99px; white-space: nowrap; } .fd-dn-chip.gray { color: var(--fd-mut); background: var(--fd-alt); border: 1px solid var(--fd-border); } .fd-dn-chip.amber { color: var(--fd-gold2); background: var(--fd-amber-bg); border: 1px solid var(--fd-amber-bd); } .fd-dn-chip.green { color: var(--fd-green); background: var(--fd-green-bg); border: 1px solid var(--fd-green-bd); } .fd-dn-bar { width: 100%; max-width: 220px; height: 7px; border-radius: 99px; background: var(--fd-alt); overflow: hidden; } .fd-dn-bar span { display: block; height: 100%; border-radius: 99px; background: repeating-linear-gradient(-45deg, #F9C80E 0 8px, #E3B50C 8px 16px); transition: width 0.5s ease; } .fd-dn-total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 20px; } .fd-dn-total .l { font-size: 14px; color: var(--fd-mut); } .fd-dn-total .l .m { display: none; } .fd-dn-total .v { font-family: Anton, sans-serif; font-size: 28px; color: var(--fd-ink); } .fd-dn-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .fd-dn-next-card { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; } .fd-dn-next-card .num { font-family: Anton, sans-serif; font-size: 30px; color: var(--fd-link); } .fd-dn-next-card .t { font-family: Anton, sans-serif; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fd-ink); } .fd-dn-next-card .b { font-size: 13px; color: var(--fd-mut); line-height: 1.55; } .fd-dn-support { background: var(--fd-alt); border: 1px solid var(--fd-border); border-radius: 14px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .fd-dn-support .txt { display: flex; flex-direction: column; gap: 4px; } .fd-dn-support .t { font-weight: 700; font-size: 15px; color: var(--fd-ink); } .fd-dn-support .s { font-size: 13.5px; color: var(--fd-mut); } .fd-dn-support .s strong { color: var(--fd-ink); } /* .fd-btn-outline is styled for