/* ========================================================================== Editorial theme — scoped to A quieter, magazine-style visual language for the Technology page, inspired by the warm-neutral, serif-led feel of phia.co: cream tones, an italic serif display face, refined pill buttons and softly-shadowed floating cards — layered on top of theme.css, not replacing it. Brand colors and the shared header/footer are left as-is so the page still reads as part of the same Receipts site. ========================================================================== */ .editorial-page{ background:#faf7f2; } .editorial-page .bg-alt{ background:#f3ede2; } .editorial-page .on-dark{ background:var(--obsidian); } .editorial-page h1, .editorial-page h2, .editorial-page h3{ font-family:'Fraunces', 'Axiforma', serif; font-weight:500; letter-spacing:-.01em; } .editorial-page em, .editorial-page .ed-em{ font-style:italic; font-weight:400; color:var(--mint); } /* Hero */ .ed-hero{ padding:96px 0 80px; position:relative; overflow:hidden; } .ed-hero .container{ position:relative; z-index:1; } .ed-eyebrow{ display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-bottom:22px; } .ed-eyebrow::before{ content:''; width:16px; height:1px; background:var(--slate); } .ed-hero h1{ font-size:4.2rem; line-height:1.04; margin:0 0 26px; max-width:820px; color:var(--charcoal); } .ed-hero .ed-lead{ font-family:var(--font-body); font-size:1.18rem; color:var(--text-muted); max-width:520px; margin:0 0 40px; } .ed-actions{ display:flex; gap:14px; flex-wrap:wrap; } .ed-pill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:.9rem; padding:15px 26px; border-radius:999px; transition:.2s ease; } .ed-pill.solid{ background:var(--obsidian); color:#fff; } .ed-pill.solid:hover{ background:var(--charcoal); transform:translateY(-1px); } .ed-pill.outline{ background:transparent; color:var(--charcoal); border:1px solid rgba(0,0,0,.16); } .ed-pill.outline:hover{ border-color:var(--charcoal); } /* Floating receipt card, phia-style product-card treatment */ .ed-float-wrap{ position:relative; max-width:960px; margin:64px auto 0; } .ed-float-card{ position:absolute; background:#fff; border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.10); padding:14px 18px; display:flex; align-items:center; gap:14px; font-family:var(--font-body); animation:edFloat 6s ease-in-out infinite; } .ed-float-card .ed-thumb{ width:40px; height:40px; border-radius:10px; flex-shrink:0; } .ed-float-card b{ display:block; font-family:var(--font-display); font-size:.86rem; } .ed-float-card span{ display:block; font-size:.74rem; color:var(--text-muted); } .ed-float-card .ed-price{ margin-left:auto; font-family:'Fraunces',serif; font-style:italic; color:var(--mint); font-size:1rem; white-space:nowrap; } .ed-float-1{ top:0; left:2%; animation-delay:0s; } .ed-float-2{ top:110px; right:4%; animation-delay:1.2s; } .ed-float-3{ top:230px; left:14%; animation-delay:2.4s; } @keyframes edFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } } .ed-float-spacer{ height:320px; } @media (prefers-reduced-motion:reduce){ .ed-float-card{ animation:none; } } @media (max-width:760px){ .ed-hero h1{ font-size:2.6rem; } .ed-float-card{ position:static; margin:0 0 14px; animation:none; } .ed-float-wrap{ display:flex; flex-direction:column; margin-top:40px; } .ed-float-spacer{ display:none; } } /* Softer card treatment for this page only */ .editorial-page .card{ border-radius:20px; box-shadow:0 2px 20px rgba(0,0,0,.04); border-color:rgba(0,0,0,.06); } .editorial-page .icon-badge{ border-radius:12px; } .editorial-page .section-head .eyebrow{ background:transparent; border:0; padding:0; color:var(--slate); font-family:var(--font-body); letter-spacing:.14em; } .editorial-page .section-head .eyebrow::before{ background:var(--slate); width:16px; height:1px; border-radius:0; } .editorial-page .section-head h2{ font-size:2.3rem; }