/* ================================================================ AptlyByPoks — Main Stylesheet All pages import this file. Fonts loaded via Google Fonts in base . ================================================================ */ /* ── CSS Tokens ─────────────────────────────────────────────── */ :root, [data-theme="day"] { --ink: #0D0A12; --plum: #3B0764; --violet: #6B21A8; --lavender: #C084FC; --copper: #B5623E; --copper-lt: #D4845F; --cream: #FAF7F5; --white: #FFFFFF; --bg-body: #FAF7F5; --bg-surface: #FFFFFF; --bg-surface-2:#F3EFF8; --bg-nav: rgba(250,247,245,0.97); --text-primary:#0D0A12; --text-body: #3D3550; --text-muted: #8B7AA8; --border-hair: rgba(107,33,168,0.08); --border-soft: rgba(107,33,168,0.12); --border-mid: rgba(107,33,168,0.22); --shadow-sm: 0 1px 8px rgba(13,10,18,0.06); --shadow-md: 0 4px 24px rgba(13,10,18,0.1); --shadow-lg: 0 12px 48px rgba(13,10,18,0.14); --footer-bg: #0D0A12; --footer-text: rgba(255,255,255,0.5); --input-bg: #F3EFF8; --input-border:rgba(107,33,168,0.18); --toggle-bg: #E5DCF5; --toggle-knob: #6B21A8; } [data-theme="night"] { --ink: #F0E6FF; --plum: #D8B4FE; --violet: #C084FC; --lavender: #E9D5FF; --copper: #E8936A; --copper-lt: #F0B090; --cream: #0A0714; --white: #1A1030; --bg-body: #0A0714; --bg-surface: #130E20; --bg-surface-2:#1C1535; --bg-nav: rgba(10,7,20,0.97); --text-primary:#F0E6FF; --text-body: #C4AAEE; --text-muted: #6B5A88; --border-hair: rgba(192,132,252,0.08); --border-soft: rgba(192,132,252,0.12); --border-mid: rgba(192,132,252,0.22); --shadow-sm: 0 1px 8px rgba(0,0,0,0.3); --shadow-md: 0 4px 24px rgba(0,0,0,0.4); --shadow-lg: 0 12px 48px rgba(0,0,0,0.5); --footer-bg: #06040E; --footer-text: rgba(240,230,255,0.42); --input-bg: #1C1535; --input-border:rgba(192,132,252,0.22); --toggle-bg: #2D1B4E; --toggle-knob: #C084FC; } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; font-size:16px; } body { font-family:'Inter',system-ui,sans-serif; background:var(--bg-body); color:var(--text-primary); overflow-x:hidden; line-height:1.65; transition:background-color .4s, color .4s; -webkit-font-smoothing:antialiased; } a { text-decoration:none; color:inherit; } img { max-width:100%; display:block; } /* ── Typography helpers ─────────────────────────────────────── */ .t-display { font-family:'Cormorant Garamond',serif; font-weight:400; line-height:1.05; } .t-heading { font-family:'Cormorant Garamond',serif; font-weight:400; line-height:1.15; } .t-label { font-family:'Montserrat',sans-serif; font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; } .t-body { font-family:'Inter',sans-serif; font-size:15px; line-height:1.75; color:var(--text-body); } /* ── Announcement bar ───────────────────────────────────────── */ .ann-bar { background:var(--plum); padding:.55rem 1rem; text-align:center; } [data-theme="night"] .ann-bar { background:#1A0A2E; } .ann-bar p { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.85); } .ann-bar a { color:var(--copper-lt); text-decoration:underline; text-underline-offset:2px; } /* ── Navigation ─────────────────────────────────────────────── */ .nav { position:fixed; top:0; left:0; width:100%; z-index:200; background:var(--bg-nav); backdrop-filter:blur(16px) saturate(180%); border-bottom:1px solid var(--border-hair); transition:background .4s; } .nav-inner { max-width:1440px; margin:0 auto; display:flex; align-items:center; padding:.9rem 3rem; gap:2rem; } .nav-logo { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:500; color:var(--plum); letter-spacing:.03em; white-space:nowrap; flex-shrink:0; } .nav-logo em { font-style:italic; font-weight:300; color:var(--violet); } .nav-spacer{ flex:1; } .nav-links { display:flex; gap:2rem; list-style:none; align-items:center; } .nav-links a { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-body); transition:color .25s; position:relative; padding-bottom:2px; } .nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--copper); transition:width .3s; } .nav-links a:hover, .nav-links a.active { color:var(--ink); } .nav-links a:hover::after, .nav-links a.active::after { width:100%; } .nav-right { display:flex; align-items:center; gap:.875rem; flex-shrink:0; } .nav-sister { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--border-mid); padding:.35rem .8rem; border-radius:2px; transition:all .3s; white-space:nowrap; } .nav-sister:hover { border-color:var(--copper); color:var(--copper); } .nav-cta { background:var(--ink); color:#fff; padding:.5rem 1.25rem; font-family:'Montserrat',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; border:none; cursor:pointer; border-radius:2px; transition:background .3s; white-space:nowrap; } [data-theme="night"] .nav-cta { background:var(--violet); color:#0A0714; } .nav-cta:hover { background:var(--plum); } .nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; } .nav-hamburger span { display:block; width:22px; height:1.5px; background:var(--text-primary); } /* ── Theme toggle ───────────────────────────────────────────── */ .theme-toggle { display:flex; align-items:center; gap:.5rem; cursor:pointer; padding:.3rem .7rem; border:1px solid var(--border-mid); border-radius:20px; background:var(--toggle-bg); user-select:none; } .toggle-track { width:30px; height:17px; background:var(--border-mid); border-radius:9px; position:relative; transition:background .3s; } [data-theme="night"] .toggle-track { background:var(--violet); } .toggle-knob { position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--toggle-knob); transition:transform .3s; } [data-theme="night"] .toggle-knob { transform:translateX(13px); } .toggle-label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); font-weight:600; } /* ── Marquee strip ──────────────────────────────────────────── */ .marquee-wrap { background:var(--ink); padding:.6rem 0; overflow:hidden; } [data-theme="night"] .marquee-wrap { background:#1A0A2E; border-top:1px solid var(--border-soft); } .marquee-track { display:flex; gap:3rem; animation:marquee 25s linear infinite; white-space:nowrap; } .marquee-track span { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:500; letter-spacing:.2em; color:rgba(255,255,255,.75); text-transform:uppercase; } .marquee-track .dot { color:var(--copper); } @keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } /* ── Section labels + titles ────────────────────────────────── */ .s-label { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--copper); margin-bottom:.6rem; } .s-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,3rem); font-weight:400; color:var(--plum); line-height:1.1; margin-bottom:.5rem; } .s-title em { font-style:italic; font-weight:300; color:var(--violet); } .s-rule { width:36px; height:1.5px; background:var(--copper); margin:1rem 0 2rem; border-radius:1px; } .s-sub { font-family:'Inter',sans-serif; font-size:15px; color:var(--text-body); line-height:1.8; max-width:560px; } /* ── Buttons ────────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:600; letter-spacing:.1em; text-transform:uppercase; transition:all .3s; border-radius:2px; border:none; } .btn-sm { font-size:10px; padding:.5rem 1.1rem; } .btn-md { font-size:11px; padding:.65rem 1.5rem; } .btn-lg { font-size:12px; padding:.8rem 2rem; } .btn-dark { background:var(--ink); color:#fff; } .btn-dark:hover { background:var(--plum); } .btn-copper { background:var(--copper); color:#fff; } .btn-copper:hover { background:var(--copper-lt); } .btn-violet { background:var(--violet); color:#fff; } .btn-violet:hover { background:var(--plum); } .btn-outline { background:transparent; color:var(--ink); border:1.5px solid rgba(13,10,18,.25); } .btn-outline:hover { border-color:var(--violet); color:var(--violet); } .btn-outline-light { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35); } .btn-outline-light:hover { border-color:var(--copper-lt); color:var(--copper-lt); } [data-theme="night"] .btn-dark { background:var(--violet); color:#0A0714; } [data-theme="night"] .btn-outline { color:var(--text-primary); border-color:var(--border-mid); } /* ── Form elements ──────────────────────────────────────────── */ .f-group { display:flex; flex-direction:column; gap:.4rem; } .f-group label { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); } .f-group input, .f-group select, .f-group textarea { background:var(--input-bg); border:1.5px solid var(--input-border); color:var(--text-primary); padding:.8rem 1rem; font-family:'Inter',sans-serif; font-size:14px; outline:none; transition:border .25s, background .25s; border-radius:2px; width:100%; } .f-group input::placeholder, .f-group textarea::placeholder { color:var(--text-muted); } .f-group input:focus, .f-group select:focus, .f-group textarea:focus { border-color:var(--violet); background:var(--bg-surface); } .f-group textarea { resize:vertical; min-height:110px; } /* ── Toast notifications ────────────────────────────────────── */ .toast-container { position:fixed; bottom:2rem; right:2rem; z-index:9999; display:flex; flex-direction:column; gap:.75rem; max-width:380px; } .toast { background:var(--plum); color:#fff; padding:.9rem 1.5rem; font-size:13px; border-left:3px solid var(--copper); animation:slideIn .3s ease; border-radius:0 4px 4px 0; box-shadow:var(--shadow-md); } .toast.error { border-left-color:#dc2626; } @keyframes slideIn { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} } /* ── Page hero (shared) ─────────────────────────────────────── */ .page-hero { padding:calc(72px + 37px + 4rem) 3rem 5rem; background:var(--plum); text-align:center; position:relative; overflow:hidden; } [data-theme="night"] .page-hero { background:#120820; } .page-hero .s-label { color:var(--copper); position:relative; } .page-hero .s-title { color:#fff; font-size:clamp(2.5rem,5vw,4rem); position:relative; } [data-theme="night"] .page-hero .s-title { color:var(--lavender); } .page-hero .s-title em { color:var(--copper-lt); } .page-hero p { font-family:'Inter',sans-serif; font-size:16px; color:rgba(255,255,255,.6); max-width:560px; margin:1.25rem auto 0; line-height:1.8; position:relative; } /* ── Product card ───────────────────────────────────────────── */ .prod-card { cursor:pointer; text-decoration:none; color:inherit; display:block; } .prod-img { position:relative; overflow:hidden; margin-bottom:1.1rem; background:var(--bg-surface-2); } .prod-img img { width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .6s cubic-bezier(.25,.46,.45,.94); } [data-theme="night"] .prod-img img { filter:brightness(.85); } .prod-card:hover .prod-img img { transform:scale(1.05); } [data-theme="night"] .prod-card:hover .prod-img img { filter:brightness(1); } .prod-badge { position:absolute; top:.9rem; left:.9rem; font-family:'Montserrat',sans-serif; font-size:9px; font-weight:700; letter-spacing:.14em; padding:.28rem .65rem; text-transform:uppercase; } .prod-badge.new { background:var(--plum); color:#fff; } .prod-badge.bestseller { background:var(--copper); color:#fff; } .prod-badge.sale { background:#c0392b; color:#fff; } .prod-cat { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--violet); margin-bottom:.3rem; } .prod-name { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:400; color:var(--plum); margin-bottom:.35rem; line-height:1.2; } .prod-price { font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:var(--text-primary); } .prod-price del { color:var(--text-muted); font-size:13px; font-weight:400; margin-right:.4rem; } /* ── Loading skeleton ───────────────────────────────────────── */ .skeleton { background:linear-gradient(90deg,var(--bg-surface-2) 25%, rgba(107,33,168,.08) 50%, var(--bg-surface-2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:3px; } @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } .skeleton-text { height:14px; margin-bottom:.5rem; } .skeleton-img { aspect-ratio:3/4; } .skeleton-title{ height:20px; width:60%; margin-bottom:.4rem; } /* ── Error state ────────────────────────────────────────────── */ .api-error { text-align:center; padding:4rem 2rem; } .api-error h3 { font-family:'Cormorant Garamond',serif; font-size:1.8rem; color:var(--plum); margin-bottom:.75rem; } .api-error p { font-size:14px; color:var(--text-muted); margin-bottom:1.5rem; } /* ── Footer ─────────────────────────────────────────────────── */ footer { background:var(--footer-bg); padding:5rem 3rem 2.5rem; } .footer-inner { max-width:1440px; margin:0 auto; } .footer-top { display:grid; grid-template-columns:2.5fr 1fr 1fr 1fr; gap:4rem; margin-bottom:4rem; padding-bottom:4rem; border-bottom:1px solid rgba(255,255,255,.07); } .footer-logo { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:500; color:#fff; letter-spacing:.03em; display:block; margin-bottom:1.1rem; } .footer-logo em { font-style:italic; font-weight:300; color:var(--copper); } .footer-brand p { font-size:13px; line-height:1.8; color:var(--footer-text); max-width:270px; } .footer-brand .f-sister { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.5rem; font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--copper); border:1px solid rgba(181,98,62,.4); padding:.45rem 1rem; border-radius:2px; } .footer-brand .f-sister:hover { background:rgba(181,98,62,.1); } .footer-col h4 { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--copper); margin-bottom:1.25rem; } .footer-col a, .footer-col p { font-size:13px; display:block; color:var(--footer-text); margin-bottom:.6rem; transition:color .3s; line-height:1.7; } .footer-col a:hover { color:rgba(255,255,255,.85); } .footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; } .footer-bottom p { font-size:12px; color:rgba(255,255,255,.2); } /* ── Fade-up animation ──────────────────────────────────────── */ .fade-up { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; } .fade-up.visible { opacity:1; transform:translateY(0); } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width:1024px) { .nav-inner { padding:.9rem 1.75rem; } footer { padding:4rem 2rem 2rem; } .footer-top { grid-template-columns:1fr 1fr; gap:2.5rem; } } @media (max-width:768px) { .nav-links, .nav-cta, .nav-sister { display:none; } .nav-hamburger { display:flex; } .toggle-label { display:none; } footer { padding:3rem 1.5rem 1.5rem; } .footer-top { grid-template-columns:1fr; } } @media (max-width:480px) { .s-title { font-size:1.9rem; } }