(inline beats an ID selector), so nothing actually reserves space for the fixed nav on mobile — hero-left's top padding is the only thing that can, hence the explicit nav-h here instead of a plain px value. */ .hero-left{padding:calc(var(--nav-h) + 24px) 24px 60px;border-right:none;border-bottom:1px solid var(--border2);} .hero-right{min-height:360px;padding:40px 24px;background:transparent;overflow:visible;} .hero-desc{font-size:.95rem;margin-bottom:28px;} /* Full-width CTA stack reads more like a native mobile button group than a shrunk-down row of two differently-sized controls. */ .hero-btns{flex-direction:column;align-items:stretch;gap:14px;} .btn-main{justify-content:center;} .btn-link{text-align:center;border-bottom:none;} } @media(max-width:480px){ .pill{margin-bottom:20px;} h1{margin-bottom:20px;} } /* --- ANIMATED PHONE MOCKUP --- */ .aphone-wrap{position:relative;z-index:2;flex-shrink:0;filter:drop-shadow(0 32px 48px rgba(0,0,0,0.18));} /* .hero-right's overflow:hidden (loosened to visible above on mobile) was hard-clipping this shadow at the container edge instead of letting it fade out — a wider, softer blur reads as a fade instead of a cutoff. */ @media(max-width:900px){ .aphone-wrap{filter:drop-shadow(0 28px 60px rgba(0,0,0,0.14));} } .aphone{ width:290px; background:#14120f; border-radius:40px; border:2px solid rgba(255,255,255,.07); box-shadow:0 48px 80px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.12); overflow:hidden; font-size:13px; } .aphone-statusbar{ background:#0f0d0a; padding:10px 20px 6px; display:flex;justify-content:space-between;align-items:center; font-size:10px;color:rgba(255,255,255,.35); font-family:'DM Mono',monospace; } .aphone-header{ background:#1e1b16; padding:12px 16px; display:flex;align-items:center;gap:10px; border-bottom:1px solid rgba(255,255,255,.05); } .aphone-avatar{ width:34px;height:34px;border-radius:50%; background:var(--lime); display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;color:#1a1814; font-family:'Fraunces',serif;flex-shrink:0; } .aphone-hinfo .hname{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.9);} .aphone-hinfo .hstatus{font-size:.7rem;color:var(--lime);display:flex;align-items:center;gap:5px;margin-top:2px;} .aphone-hstatus-dot{width:5px;height:5px;border-radius:50%;background:var(--lime);animation:pulse 2.5s ease-in-out infinite;} .aphone-chat{ padding:14px 12px 18px; display:flex;flex-direction:column;gap:8px; background:#14120f; height:360px; overflow-y:auto; scrollbar-width:none; } .aphone-chat::-webkit-scrollbar{display:none;} .aphone-msg{ max-width:84%; padding:9px 13px; border-radius:18px; font-size:12px;line-height:1.55; opacity:0;transform:translateY(10px); transition:opacity .35s ease,transform .35s ease; } @media(prefers-reduced-motion:reduce){.aphone-msg{transition:none;}} .aphone-msg.visible{opacity:1;transform:translateY(0);} .aphone-msg.them{ background:#2b2822; color:rgba(255,255,255,.88); align-self:flex-start; border-radius:4px 18px 18px 18px; } .aphone-msg.us{ background:var(--lime); color:#1a1814; align-self:flex-end; border-radius:18px 4px 18px 18px; font-weight:400; } .aphone-img{ width:100%;height:58px;border-radius:8px; background:linear-gradient(135deg,#3a3530,#2a2520); display:flex;align-items:center;justify-content:center; font-size:20px;margin-bottom:4px; } .aphone-typing-row{ align-self:flex-start; display:flex;gap:5px; padding:10px 14px; background:#2b2822; border-radius:4px 18px 18px 18px; opacity:0;transition:opacity .25s ease; } .aphone-typing-row.visible{opacity:1;} .aphone-typing-row .tdot{ width:6px;height:6px;border-radius:50%; background:rgba(255,255,255,.35); animation:td 1.4s ease-in-out infinite; } .aphone-typing-row .tdot:nth-child(2){animation-delay:.2s;} .aphone-typing-row .tdot:nth-child(3){animation-delay:.4s;} /* Booking notification badge */ .aphone-notif{ position:absolute; bottom:-12px;right:-16px; background:#fff; border-radius:14px; border:1px solid var(--border2); padding:12px 16px; box-shadow:0 10px 30px rgba(0,0,0,.13); font-size:.78rem; opacity:0;transform:translateY(8px); transition:opacity .4s ease,transform .4s ease; pointer-events:none; white-space:nowrap; } .aphone-notif.visible{opacity:1;transform:translateY(0);} .aphone-notif-label{color:var(--ink3);font-size:.65rem;margin-bottom:4px;font-family:'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;} .aphone-notif-val{font-weight:500;color:var(--ink);display:flex;align-items:center;gap:7px;} .aphone-notif-check{width:17px;height:17px;background:var(--lime);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--ink);font-weight:700;flex-shrink:0;} @media(max-width:360px){.aphone{width:250px;}} /* --- HERO TEXT (pill, heading, CTAs, proof stats) --- */ .pill{ display:inline-flex;align-items:center;gap:8px; align-self:flex-start; background:var(--lime-bg);color:#4a6e0a; font-size:.75rem;font-weight:500;letter-spacing:.06em; padding:6px 14px;border-radius:100px; margin-bottom:28px;border:1px solid rgba(74,110,10,.15); } .pill-dot{width:6px;height:6px;border-radius:50%;background:#6db60e;} h1{ font-family:'Fraunces',serif; font-size:clamp(34px,7vw,76px); line-height:1.1; font-weight:700; color:var(--ink); margin-bottom:28px; } h1 em{font-style:italic;color:var(--orange);} /* Below 900px the clamp's 34px floor is wider than "Sveriges hantverkare" fits on narrow phones (it's nowrap — see .nowrap-phrase). Pure vw with no floor keeps the phrase shrinking in step with the viewport so it never overflows, all the way down to the narrowest phones. */ @media(min-width:901px){.hero-left h1{font-size:clamp(30px, calc(4.5vw - 8px), 50px);}} @media(max-width:900px){h1{font-size:7.2vw;}} /* Keeps a phrase like "Sveriges hantverkare" on one line at every width — the mobile h1 font-size below is scaled in vw (not clamped to a fixed floor) specifically so this phrase's line always fits without wrapping. */ .nowrap-phrase{white-space:nowrap;} .hero-desc{ font-size:1.12rem;line-height:1.75; color:var(--ink3);max-width:460px; margin-bottom:40px; } .hero-btns{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .btn-main{ display:inline-flex;align-items:center;gap:8px; background:var(--ink);color:var(--cream); font-size:.9rem;font-weight:500; padding:14px 28px;border-radius:100px; text-decoration:none;transition:all .2s; } .btn-main:hover{background:var(--orange);transform:translateY(-2px);} .btn-link{ font-size:.9rem;color:var(--ink3);text-decoration:none; border-bottom:1px solid var(--border2);padding-bottom:2px; transition:color .2s; } .btn-link:hover{color:var(--ink);} .hero-proof{ margin-top:56px;padding-top:40px; border-top:1px solid var(--border); display:flex;gap:24px; } .proof-item{flex:1;min-width:0;} .proof-item .n{ font-family:'Fraunces',serif; font-size:clamp(1.5rem, 2.4vw, 2.2rem);white-space:nowrap;font-weight:700;color:var(--ink); line-height:1; } .proof-item .n span{color:var(--orange);} .proof-item .l{font-size:.75rem;color:var(--ink3);margin-top:4px;line-height:1.4;} /* All 3 stats stay in one row on mobile too — grid instead of the desktop flex row so each column is forced to 1/3 width (min-width:0 lets its label text wrap there) rather than sizing to its own content and overflowing the phone width. */ @media(max-width:900px){ .hero-proof{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px; margin-top:36px;padding-top:28px; } .proof-item{min-width:0;} .proof-item .n{font-size:1.5rem;} .proof-item .l{font-size:.68rem;} } /* --- SECTION COMMON --- */ section{padding:100px 0;} .container{max-width:1160px;margin:0 auto;padding:0 40px;} @media(max-width:768px){.container{padding:0 20px;}section{padding:64px 0;}} .section-label{ font-family:'DM Mono',monospace; font-size:.7rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink3);margin-bottom:20px; display:flex;align-items:center;gap:10px; } .section-label::before{content:attr(data-n);color:var(--orange);} h2{ font-family:'Fraunces',serif; font-size:clamp(36px,4vw,56px); line-height:1.05;font-weight:700; color:var(--ink);margin-bottom:16px; } h2 em{font-style:italic;color:var(--orange);} .section-intro{font-size:1rem;color:var(--ink3);line-height:1.75;max-width:520px;margin-bottom:64px;} /* --- PROBLEM (#problem) --- */ /* Continues the hero-bg peach fade across the #home/#problem seam so the page reads as one flowing surface — #f9c998 matches hero-bg's peach stop. */ #problem{position:relative;} #problem::before{ content:""; position:absolute;top:0;left:0;right:0;height:320px; background:linear-gradient(to bottom, #f9c998 0%, var(--cream) 100%); pointer-events:none;z-index:0; } #problem .container{position:relative;z-index:1;} #problem .two-col{ display:grid;grid-template-columns:1fr 1fr;gap:0; border:1px solid var(--border2);border-radius:16px;overflow:hidden; background:var(--cream2); box-shadow:0 24px 48px rgba(26,24,20,.1); } @media(max-width:768px){#problem .two-col{grid-template-columns:1fr;}} .prob-card{ padding:44px 40px;position:relative; border-right:1px solid var(--border2); border-bottom:1px solid var(--border2); background:var(--cream2); transition:background .3s; } .prob-card:hover{background:#fff;} .prob-card:nth-child(2n){border-right:none;} .prob-card:nth-last-child(-n+2){border-bottom:none;} @media(max-width:768px){ .prob-card{border-right:none!important;} .prob-card:last-child{border-bottom:none;} } @media(max-width:480px){ .prob-card{padding:32px 24px;} } .prob-icon{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; margin-bottom:20px;font-size:22px; } .prob-card h3{font-size:1.05rem;font-weight:500;color:var(--ink);margin-bottom:10px;} .prob-card p{font-size:.88rem;color:var(--ink3);line-height:1.75;} .prob-loss{ display:inline-block;margin-top:14px; background:var(--orange-bg);color:var(--orange); font-size:.75rem;font-weight:500;padding:4px 10px;border-radius:100px; } /* --- FEATURES (#features) --- */ .feature-grid{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px; } @media(max-width:900px){.feature-grid{grid-template-columns:1fr 1fr;}} @media(max-width:540px){.feature-grid{grid-template-columns:1fr;}} .feat-card{ background:var(--cream2);border:1px solid var(--border2); border-radius:16px;padding:32px 28px; box-shadow:0 24px 48px rgba(26,24,20,.1); transition:all .25s; } .feat-card:hover{background:#fff;transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.07);} .feat-card.big{grid-column:span 2;} @media(max-width:900px){.feat-card.big{grid-column:span 1;}} .feat-icon{ width:44px;height:44px;border-radius:10px; display:flex;align-items:center;justify-content:center; font-size:20px;margin-bottom:20px; } .feat-card h3{font-size:1rem;font-weight:500;color:var(--ink);margin-bottom:8px;} .feat-card p{font-size:.85rem;color:var(--ink3);line-height:1.7;} .feat-stat{ font-family:'Fraunces',serif; font-size:2.4rem;font-weight:700; color:var(--orange);margin-top:20px;line-height:1; } .feat-stat span{font-size:1rem;color:var(--ink3);font-family:'DM Sans',sans-serif;font-weight:300;} @media(max-width:900px){.feat-stat span{display:block;margin-top:6px;}} /* --- KONTROLLBLOCK --- */ .ctrl-box{ margin-top:20px;background:var(--ink); border-radius:16px;padding:40px 44px;color:#fff; } @media(max-width:600px){.ctrl-box{padding:32px 24px;}} .ctrl-box h3{ font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700; color:#fff;margin-bottom:10px;line-height:1.25; } .ctrl-box h3 em{font-style:italic;color:var(--lime-mid);} .ctrl-box > p{ font-size:.9rem;color:rgba(255,255,255,.6); line-height:1.7;margin-bottom:32px;max-width:520px; } .ctrl-box > p:last-child{margin-bottom:0;} /* .ctrl-levels/.ctrl-level: prepared for a 3-up breakdown inside .ctrl-box (e.g. "full auto" / "review first" / "manual") — not wired into the HTML yet. */ .ctrl-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media(max-width:700px){.ctrl-levels{grid-template-columns:1fr;gap:16px;}} .ctrl-level{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px;padding:22px 20px; } .ctrl-level .n{ font-family:'DM Mono',monospace;font-size:.6rem; letter-spacing:.14em;text-transform:uppercase; color:var(--lime-mid);margin-bottom:12px; } .ctrl-level h4{ font-size:.95rem;font-weight:500;color:#fff; margin-bottom:8px;line-height:1.4; } .ctrl-level p{ font-size:.84rem;color:rgba(255,255,255,.55); line-height:1.6;margin:0; } /* Prepared, not wired into the HTML yet: a channel strip and a 3-up capability grid — alternate/additional building blocks for #features. */ .chan-strip{ display:flex;align-items:center;justify-content:center;gap:0; border:1px solid var(--border2);border-radius:16px; overflow:hidden;margin-bottom:20px;background:var(--cream2); } @media(max-width:700px){.chan-strip{flex-wrap:wrap;}} .chan-item{ flex:1;padding:22px 16px;text-align:center; border-right:1px solid var(--border2); } .chan-item:last-child{border-right:none;} @media(max-width:700px){ .chan-item{flex:1 1 50%;border-bottom:1px solid var(--border2);} .chan-item:nth-child(2n){border-right:none;} .chan-item:nth-last-child(-n+2){border-bottom:none;} } .chan-item .k{ font-family:'DM Mono',monospace;font-size:.6rem; letter-spacing:.14em;text-transform:uppercase; color:var(--orange);margin-bottom:8px; } .chan-item .v{font-size:.92rem;color:var(--ink);font-weight:400;} .cap-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; border:1px solid var(--border2);border-radius:16px;overflow:hidden; } @media(max-width:900px){.cap-grid{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.cap-grid{grid-template-columns:1fr;}} .cap-card{ padding:36px 32px;background:var(--cream2); border-right:1px solid var(--border2); border-bottom:1px solid var(--border2); transition:background .25s; } .cap-card:hover{background:#fff;} .cap-card:nth-child(3n){border-right:none;} .cap-card:nth-last-child(-n+3){border-bottom:none;} @media(max-width:900px){ .cap-card{border-right:1px solid var(--border2);border-bottom:1px solid var(--border2);} .cap-card:nth-child(3n){border-right:1px solid var(--border2);} .cap-card:nth-child(2n){border-right:none;} .cap-card:nth-last-child(-n+2){border-bottom:none;} } @media(max-width:600px){ .cap-card{border-right:none!important;border-bottom:1px solid var(--border2)!important;} .cap-card:last-child{border-bottom:none!important;} } .cap-tag{ display:inline-block; font-family:'DM Mono',monospace;font-size:.6rem; letter-spacing:.14em;text-transform:uppercase; color:var(--orange);margin-bottom:16px; } .cap-card h3{ font-size:1.02rem;font-weight:500;color:var(--ink); margin-bottom:10px;line-height:1.35; } .cap-card p{font-size:.9rem;color:var(--ink3);line-height:1.7;} /* --- HOW IT WORKS (#how) --- */ #how{background:var(--cream2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);} .steps-visual{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; border:1px solid var(--border2);border-radius:16px;overflow:hidden; box-shadow:0 24px 48px rgba(26,24,20,.1); } @media(max-width:900px){.steps-visual{grid-template-columns:1fr 1fr;}} @media(max-width:540px){.steps-visual{grid-template-columns:1fr;}} .step-col{ padding:36px 28px;border-right:1px solid var(--border2); background:var(--cream);position:relative; } .step-col:last-child{border-right:none;} @media(max-width:900px){ .step-col:nth-child(2n){border-right:none;} .step-col:nth-child(-n+2){border-bottom:1px solid var(--border2);} } .step-num{ font-family:'Fraunces',serif; font-size:2.8rem;font-weight:700; color:var(--cream3);line-height:1;margin-bottom:16px; } .step-col h3{font-size:.95rem;font-weight:500;color:var(--ink);margin-bottom:8px;} .step-col p{font-size:.83rem;color:var(--ink3);line-height:1.7;} .step-day{ display:inline-block;margin-top:14px; font-family:'DM Mono',monospace;font-size:.65rem; letter-spacing:.1em;color:var(--orange); } /* --- BEFORE/AFTER (#before-after) --- */ #before-after{border-bottom:1px solid var(--border2);} /* Row-by-row "before/after" comparison table. */ .cmp{ border:1px solid var(--border2);border-radius:16px; overflow:hidden;background:var(--cream); box-shadow:0 24px 48px rgba(26,24,20,.1); } .cmp-row{ display:grid;grid-template-columns:200px 1fr 1fr; border-bottom:1px solid var(--border2); } .cmp-row:last-child{border-bottom:none;} @media(max-width:820px){ .cmp-row{grid-template-columns:1fr;} } /* Rubrikrad */ .cmp-head{background:var(--cream2);} .cmp-head > div{ padding:16px 24px; font-family:'DM Mono',monospace;font-size:.62rem; letter-spacing:.16em;text-transform:uppercase; } .cmp-head .h-when{color:var(--ink3);} .cmp-head .h-before{color:var(--ink3);border-left:1px solid var(--border2);} .cmp-head .h-after{ color:#4a6e0a;border-left:1px solid var(--border2); background:var(--lime-bg); } @media(max-width:820px){.cmp-head{display:none;}} /* Tidpunkt */ .cmp-when{ padding:24px;display:flex;flex-direction:column;justify-content:center; } .cmp-when .t{ font-family:'DM Mono',monospace;font-size:.68rem; letter-spacing:.12em;color:var(--orange);margin-bottom:6px; } .cmp-when .w{ font-size:.95rem;color:var(--ink);font-weight:400;line-height:1.4; } @media(max-width:820px){ .cmp-when{padding:20px 20px 12px;background:var(--cream2);} } /* Före */ .cmp-before{ padding:24px;border-left:1px solid var(--border2); display:flex;align-items:center;gap:12px; font-size:.92rem;color:var(--ink3);line-height:1.6; } .cmp-before .m{ font-family:'DM Mono',monospace;font-size:.7rem; color:var(--ink3);flex-shrink:0; } @media(max-width:820px){ .cmp-before{border-left:none;padding:12px 20px;} .cmp-before::before{ content:"Utan Flowride"; font-family:'DM Mono',monospace;font-size:.58rem; letter-spacing:.14em;text-transform:uppercase; color:var(--ink3);flex-shrink:0;width:110px; } } /* Efter */ .cmp-after{ padding:24px;border-left:1px solid var(--border2); background:var(--lime-bg); display:flex;align-items:center;gap:12px; font-size:.92rem;color:var(--ink);font-weight:400;line-height:1.6; } .cmp-after .m{ color:#5a7a00;font-weight:700;flex-shrink:0; } @media(max-width:820px){ .cmp-after{border-left:none;padding:12px 20px 20px;} .cmp-after::before{ content:"Med Flowride"; font-family:'DM Mono',monospace;font-size:.58rem; letter-spacing:.14em;text-transform:uppercase; color:#4a6e0a;flex-shrink:0;width:110px; } } /* Summering under tabellen — prepared, not wired into the HTML yet. */ .cmp-sum{ margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px; } @media(max-width:600px){.cmp-sum{grid-template-columns:1fr;}} .cmp-sum-card{ border:1px solid var(--border2);border-radius:16px; padding:28px 32px;background:var(--cream); } .cmp-sum-card .n{ font-family:'Fraunces',serif;font-size:2.4rem;font-weight:700; color:var(--orange);line-height:1;margin-bottom:8px; } .cmp-sum-card .l{font-size:.88rem;color:var(--ink3);line-height:1.6;} /* --- REVIEWS (#reviews) --- */ /* Outer viewport: clips the marquee and fades its edges so cards dissolve in/out instead of cutting off sharply. */ .reviews-track{ overflow:hidden;margin:48px -40px 0;padding:24px 0 88px; mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); } /* Inner strip: holds the cards twice over (duplicated by JS) so animating it exactly -50% loops back onto an identical copy with no visible seam. */ .reviews-marquee{ display:flex;gap:20px;width:max-content;padding:0 40px; animation:reviews-scroll 50s linear infinite; } .reviews-track:hover .reviews-marquee{animation-play-state:paused;} @keyframes reviews-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){.reviews-marquee{animation:none;}} .review-card{ flex:0 0 320px; background:var(--cream);border:1px solid var(--border2);border-radius:16px; box-shadow:0 24px 48px rgba(26,24,20,.1); padding:32px 28px;display:flex;flex-direction:column;gap:20px; } .review-quote{font-size:.92rem;color:var(--ink2);line-height:1.7;flex:1;} .review-quote strong{color:var(--ink);font-weight:500;} .review-author{display:flex;align-items:center;gap:12px;} .review-avatar{ width:40px;height:40px;border-radius:50%;flex-shrink:0;overflow:hidden; background:var(--lime-bg);color:#4a6e0a; display:flex;align-items:center;justify-content:center;font-weight:500;font-size:.9rem; } .review-avatar img{width:100%;height:100%;object-fit:cover;} .review-name{font-size:.88rem;font-weight:500;color:var(--ink);} .review-role{font-size:.75rem;color:var(--ink3);} @media(max-width:600px){.review-card{flex-basis:270px;}} /* .reviews-track's -40px bleed matches .container's 40px desktop padding. On mobile .container drops to 20px, so the bleed must match or the track overshoots the viewport and causes horizontal scroll. */ @media(max-width:768px){ .reviews-track{margin-left:-20px;margin-right:-20px;} .reviews-marquee{padding:0 20px;} } /* --- PRICING (#pricing) --- */ #pricing{background:var(--cream2);border-top:1px solid var(--border2);} .pricing-two-col{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border2);border-radius:16px;overflow:hidden;max-width:780px;margin:0 auto;box-shadow:0 24px 48px rgba(26,24,20,.1);} .pricing-two-col .price-panel:first-child{border-right:1px solid var(--border2);} .price-panel{padding:48px 44px;} .price-divider{border:none;border-top:1px solid var(--border);margin:24px 0;} .btn-price-main{ display:block;width:100%;text-align:center; background:var(--ink);color:var(--cream); font-size:.88rem;font-weight:500; padding:13px;border-radius:100px; text-decoration:none;transition:all .2s; } .btn-price-main:hover{background:var(--orange);transform:translateY(-1px);} /* --- PILOT / KAMPANJ --- */ .pilot-banner{ max-width:780px;margin:0 auto 24px; background:var(--ink);border-radius:16px; box-shadow:0 24px 48px rgba(26,24,20,.1); padding:32px 36px;color:#fff; display:flex;align-items:center;gap:32px; } @media(max-width:600px){ .pilot-banner{flex-direction:column;align-items:flex-start;gap:20px;padding:28px 24px;} } .pilot-badge{ display:inline-flex;align-items:center;gap:8px; background:var(--lime);color:#2e4a00; font-family:'DM Mono',monospace;font-size:.65rem; font-weight:500;letter-spacing:.14em;text-transform:uppercase; padding:6px 14px;border-radius:100px;margin-bottom:16px; } .pilot-badge-dot{ width:6px;height:6px;border-radius:50%;background:#2e4a00; animation:pulse 2.5s ease-in-out infinite; } .pilot-banner h3{ font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700; line-height:1.2;margin-bottom:12px;color:#fff; } .pilot-banner h3 em{font-style:italic;color:var(--lime-mid);} .pilot-banner p{ font-size:.9rem;color:rgba(255,255,255,.65); line-height:1.7;margin:0; } .pilot-slots{ flex-shrink:0;text-align:center; border-left:1px solid rgba(255,255,255,.14); padding-left:32px; } @media(max-width:600px){ .pilot-slots{border-left:none;border-top:1px solid rgba(255,255,255,.14); padding-left:0;padding-top:20px;width:100%;text-align:left;} } .pilot-slots .n{ font-family:'Fraunces',serif;font-size:3rem;font-weight:700; color:var(--lime-mid);line-height:1; } .pilot-slots .l{ font-family:'DM Mono',monospace;font-size:.62rem; letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.5);margin-top:8px; } /* Prisvisning med ordinarie pris överstruket */ .price-was{ font-family:'DM Sans',sans-serif;font-size:1.1rem;font-weight:300; color:var(--ink3);text-decoration:line-through; text-decoration-thickness:1px;margin-bottom:6px; } .price-now{ font-family:'Fraunces',serif;font-size:3.2rem; font-weight:700;line-height:1; } @media(max-width:600px){.price-now{font-size:2.6rem;}} .price-note{ display:inline-block;margin-top:12px; background:var(--lime-bg);color:#4a6e0a; font-size:.72rem;font-weight:500; padding:4px 12px;border-radius:100px; } /* Both price cards visible side by side at once (no swipe) — sized down enough to fit two columns on a phone: smaller padding/gaps, and the inline font-sizes on the label/blurb/list-item lines need !important since an inline style="" attribute otherwise beats any stylesheet rule regardless of selector specificity. This block has to come after every .price-* base rule above (including their own media queries) — equal-specificity rules resolve by source order, so an override placed earlier in the file loses to a later unconditional rule even when its own media query matches. */ @media(max-width:600px){ .pricing-two-col{ display:grid;grid-template-columns:1fr 1fr;gap:10px; border:none;border-radius:0;box-shadow:none; } .pricing-two-col .price-panel:first-child{border-right:none;} .price-panel{ padding:20px 14px; border:1px solid var(--border2);border-radius:14px; } .price-panel > div:first-child{font-size:.6rem!important;margin-bottom:14px!important;} .price-was{font-size:.78rem;margin-bottom:4px;} .price-now{font-size:1.6rem;} .price-panel > div:nth-child(4){font-size:.72rem!important;} .price-note{font-size:.62rem;padding:3px 8px;margin-top:8px;} .price-divider{margin:16px 0;} .price-panel ul{gap:9px!important;} .price-panel li{font-size:.72rem!important;gap:6px!important;line-height:1.4;} .btn-price-main{font-size:.75rem;padding:11px;margin-top:20px!important;} } /* Vad du ger i utbyte */ .pilot-exchange{ max-width:780px;margin:20px auto 0; border:1px solid var(--border2);border-radius:16px; box-shadow:0 24px 48px rgba(26,24,20,.1); padding:28px 32px;background:var(--cream); } .pilot-exchange .t{ font-family:'DM Mono',monospace;font-size:.65rem; letter-spacing:.15em;text-transform:uppercase; color:var(--ink3);margin-bottom:16px; } .pilot-exchange ul{ list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px; } @media(max-width:600px){.pilot-exchange ul{grid-template-columns:1fr;}} .pilot-exchange li{ font-size:.88rem;color:var(--ink2);line-height:1.6; display:flex;gap:10px;align-items:flex-start; } .pilot-exchange li span{color:var(--orange);flex-shrink:0;} /* The 24px vertical offset in the base shadow leaves only ~24px of blur reaching above the card's top edge (blur 48 − offset 24), so it fades out much faster on top than on the sides/bottom — reads as an abrupt edge right under the pricing cards above it. A near-symmetric, softer shadow fixes that without needing extra spacing between the two. */ @media(max-width:900px){ .pilot-exchange{box-shadow:0 8px 28px rgba(26,24,20,.09);} } .pilot-fine{ font-size:.78rem;color:var(--ink3); text-align:center;margin:16px auto 0;max-width:600px;line-height:1.6; } /* --- END CTA (#end-cta) --- */ #end-cta{background:var(--ink);text-align:center;} #end-cta h2{color:#fff;} #end-cta h2 em{color:var(--lime-mid);} #end-cta .section-intro{color:rgba(255,255,255,.65);max-width:480px;margin-left:auto;margin-right:auto;text-align:center;} /* --- CONTACT (#contact) --- */ #contact{background:var(--cream);} .contact-wrap{ display:grid;grid-template-columns:5fr 7fr;gap:0; border:1px solid var(--border2);border-radius:16px;overflow:hidden; box-shadow:0 24px 48px rgba(26,24,20,.1); } @media(max-width:768px){.contact-wrap{grid-template-columns:1fr;}} .contact-left{padding:56px 48px;border-right:1px solid var(--border2);background:var(--ink);color:#fff;} @media(max-width:768px){.contact-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.1);padding:40px 24px;}} .contact-left h2{color:#fff;margin-bottom:16px;} .contact-left h2 em{color:var(--lime-mid);} .contact-left p{font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.8;margin-bottom:36px;} .contact-right{padding:48px 48px;background:var(--cream);} @media(max-width:768px){.contact-right{padding:36px 24px;}} .form-group{margin-bottom:20px;} .form-label{ display:block;font-family:'DM Mono',monospace;font-size:.65rem; letter-spacing:.15em;text-transform:uppercase;color:var(--ink3); margin-bottom:8px; } .form-input,.form-select{ width:100%;background:var(--cream2);border:1px solid var(--border2); color:var(--ink);padding:11px 14px; font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:300; border-radius:10px;outline:none; transition:border-color .2s,background .2s; -webkit-appearance:none; } .form-input::placeholder{color:var(--ink3);} .form-input:focus,.form-select:focus{border-color:var(--ink);background:#fff;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} @media(max-width:480px){.form-row{grid-template-columns:1fr;}} .form-select{color:var(--ink3);} .form-select option{background:#fff;color:var(--ink);} .btn-submit{ width:100%;padding:15px;border:none;cursor:pointer; background:var(--ink);color:var(--cream); font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:500; border-radius:100px;transition:all .2s;margin-top:4px; } .btn-submit:hover{background:var(--orange);transform:translateY(-1px);} /* --- FOOTER --- */ footer{ padding:40px max(40px, calc((100% - 1160px) / 2));display:flex;align-items:center; justify-content:space-between;flex-wrap:wrap;gap:20px; border-top:1px solid var(--border2); } @media(max-width:600px){footer{padding:28px 20px;flex-direction:column;align-items:flex-start;}} .footer-logo{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;} .footer-links{display:flex;gap:28px;list-style:none;} .footer-links a{font-size:.83rem;color:var(--ink3);text-decoration:none;transition:color .2s;} .footer-links a:hover{color:var(--ink);} .footer-copy{font-size:.75rem;color:var(--ink3);} /* ===================================================================== UNDERSIDOR — delade komponenter ===================================================================== */ @keyframes rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}} /* Markerar aktuell sida i toppmenyn */ .nav-links a.active{color:var(--ink);} /* Startsidans mobil-hero centrerar .btn-main under 900px — undersidorna ska behålla knapparnas vanliga textjustering. */ @media(max-width:900px){ .sida-faq .btn-main, .sida-hur-fungerar-det .btn-main, .sida-om-oss .btn-main{justify-content:normal;} } /* ---------- BACK LINK ---------- */ .back-link{ display:inline-flex;align-items:center;gap:7px; font-size:.85rem;color:var(--ink3);text-decoration:none; transition:color .2s; } .back-link:hover{color:var(--ink);} .back-link svg{flex:none;} /* ---------- FAQ LIST (faq.html + telefonvaxel.html) ---------- */ .faq-wrap{max-width:760px;margin:0 auto;padding:40px 40px 40px;} @media(max-width:768px){.faq-wrap{padding:28px 20px 20px;}} .faq-list{display:flex;flex-direction:column;gap:14px;} .faq-item{ border:1px solid var(--border2); background:var(--cream); border-radius:18px; overflow:hidden; transition:background .2s,border-color .2s; } .faq-item[open]{background:#fff;border-color:rgba(232,98,26,.3);} .faq-q{ cursor:pointer;list-style:none; display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 22px; font-family:'Fraunces',serif;font-weight:500;font-size:1.05rem; color:var(--ink); } .faq-q::-webkit-details-marker{display:none;} .faq-icon{ flex:none;width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--lime-bg);color:#4a6e0a; font-size:1rem;line-height:1; transition:transform .25s ease,background .2s,color .2s; } .faq-item[open] .faq-icon{ transform:rotate(45deg); background:var(--orange-bg);color:var(--orange); } .faq-a{ padding:0 22px 22px; font-size:.92rem;line-height:1.75; color:var(--ink3);max-width:60ch; } .faq-cta{margin-top:36px;display:flex;justify-content:center;} /* ===================================================================== faq.html (body.sida-faq) ===================================================================== */ .sida-faq .pill{margin-bottom:20px;align-self:auto;} /* ---------- HERO HEADER ---------- .page-head är samma sidrubrik för övriga undersidor (kontakta-oss, priser) */ .faq-head, .page-head{ position:relative; max-width:760px;margin:0 auto; padding:calc(var(--nav-h) + 56px) 40px 8px; } /* Full-bleed peach fade behind the header, same as the hero/#problem seam on the startsida — width:100vw + centered offset breaks it out of faq-head's own max-width. z-index:-1 would sit behind body's own background (body paints in a later step than negative-z-index elements, same as any other in-flow box), hiding it completely — so this uses z-index:0 instead and explicitly raises the header's content above it, exactly like #problem::before + .container{z-index:1} on the startsida. */ .faq-head::before, .page-head::before{ content:""; position:absolute;top:0;left:50%; width:100vw;transform:translateX(-50%); height:380px; background:linear-gradient(to bottom, #f9c998 0%, var(--cream) 100%); z-index:0;pointer-events:none; } .faq-head > *, .page-head > *{position:relative;z-index:1;} @media(max-width:768px){.faq-head,.page-head{padding:calc(var(--nav-h) + 36px) 20px 8px;}} .faq-head h1, .page-head h1{ font-family:'Fraunces',serif; font-size:clamp(32px,5vw,52px); line-height:1.1;font-weight:700; color:var(--ink); margin-bottom:14px; } .faq-head p, .page-head p{ font-size:1.02rem;line-height:1.7; color:var(--ink3);max-width:56ch; } /* ===================================================================== om-oss.html (body.sida-om-oss) ===================================================================== */ .sida-om-oss .pill{margin-bottom:20px;align-self:auto;} .sida-om-oss .section-label:not([data-n])::before{content:none;} /* --- ABOUT (#about) --- */ #about{background:var(--cream2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);} .about-wrap{ display:grid;grid-template-columns:5fr 7fr;gap:0; border:1px solid var(--border2);border-radius:16px;overflow:hidden; box-shadow:0 24px 48px rgba(26,24,20,.1); } @media(max-width:768px){.about-wrap{grid-template-columns:1fr;}} .about-visual{ background:var(--cream2); display:flex;align-items:center;justify-content:center; min-height:380px;border-right:1px solid var(--border2); position:relative;overflow:hidden; padding:40px; } @media(max-width:768px){.about-visual{border-right:none;border-bottom:1px solid var(--border2);min-height:240px;}} .about-tag{ position:absolute;bottom:24px;left:24px; background:#fff;border:1px solid var(--border2); border-radius:10px;padding:10px 14px; } .about-tag .name{font-weight:500;font-size:.9rem;color:var(--ink);} .about-tag .role{font-size:.75rem;color:var(--ink3);margin-top:2px;} .about-text{padding:48px 48px;background:var(--cream);} @media(max-width:768px){.about-text{padding:36px 24px;}} .about-text h2{margin-bottom:20px;} .about-text p{font-size:.92rem;color:var(--ink3);line-height:1.8;margin-bottom:16px;} .about-text strong{color:var(--ink);font-weight:500;font-size:1.1rem;} .about-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border);margin-top:36px;padding-top:0;} .about-num{padding:24px 0;border-right:1px solid var(--border);} .about-num:first-child{padding-right:20px;} .about-num:nth-child(2){padding:24px 20px;} .about-num:last-child{padding-left:20px;border-right:none;} .about-num .n{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;color:var(--orange);line-height:1;} .about-num .l{font-size:.7rem;color:var(--ink3);margin-top:4px;line-height:1.4;} @media(max-width:420px){.about-num .n{font-size:1.3rem;}} /* First section on this page — clear the fixed nav */ #about{padding-top:calc(var(--nav-h) + 64px);} /* ===================================================================== hur-fungerar-det.html (body.sida-hur-fungerar-det) ===================================================================== */ .sida-hur-fungerar-det .pill{margin-bottom:24px;align-self:auto;} /* ---------- HERO HEADER ---------- */ .sida-hur-fungerar-det .hero-head{ max-width:1160px;margin:0 auto; padding:calc(var(--nav-h) + 64px) 40px 8px; } @media(max-width:768px){.sida-hur-fungerar-det .hero-head{padding:calc(var(--nav-h) + 40px) 20px 8px;}} .sida-hur-fungerar-det .hero-head h1{ font-family:'Fraunces',serif; font-size:clamp(30px,4.6vw,52px); line-height:1.12;font-weight:700; color:var(--ink); margin-bottom:18px;max-width:16ch; } .sida-hur-fungerar-det .hero-head h1 em{font-style:italic;color:var(--orange);} .sida-hur-fungerar-det .hero-head p{ font-size:1.02rem;line-height:1.7; color:var(--ink3);max-width:52ch; } /* ---------- STAGE ---------- */ .stage{ max-width:1160px;margin:0 auto; padding:48px 40px 100px; display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:32px; align-items:start; } @media(max-width:860px){ .stage{grid-template-columns:1fr;padding:40px 20px 72px;} } /* ---------- PHONE ---------- */ /* Ljus variant av telefonen — skriver över startsidans mörka .aphone */ .phone-col{display:flex;flex-direction:column;align-items:center;gap:20px;} .sida-hur-fungerar-det .aphone-wrap{ position:static;z-index:auto;flex-shrink:1; filter:drop-shadow(0 32px 48px rgba(0,0,0,.14)); } .sida-hur-fungerar-det .aphone{ width:280px; background:var(--cream); border-radius:40px; border:2px solid rgba(26,24,20,.08); box-shadow:0 0 0 1px rgba(26,24,20,.06); overflow:hidden; font-size:13px; position:relative; } .sida-hur-fungerar-det .aphone::before{ content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%); width:34%;height:20px;background:var(--ink);border-radius:12px;z-index:5; } .sida-hur-fungerar-det .aphone-statusbar{ background:none;align-items:normal; font-family:'DM Mono',monospace; font-size:10px;color:var(--ink3); display:flex;justify-content:space-between; padding:16px 22px 4px; } .fs-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 6px;} .fs-brand{font-family:'Fraunces',serif;font-weight:700;font-size:14px;color:var(--ink);} .fs-burger span{display:block;width:15px;height:1.5px;background:var(--ink);margin:3px 0;} .fs-hero{ margin:8px 16px 0;padding:22px 16px 20px; background:linear-gradient(to top,#f9c998 0px,#f9c998 60px,var(--cream) 100%); border-radius:16px;border:1px solid var(--border2); } .fs-pill{ display:inline-flex;align-items:center;gap:5px; background:var(--lime-bg);color:#4a6e0a; font-size:8.5px;font-weight:500;letter-spacing:.05em; padding:4px 9px;border-radius:100px;margin-bottom:10px; border:1px solid rgba(74,110,10,.15); } .fs-pill-dot{width:4px;height:4px;border-radius:50%;background:#6db60e;} .fs-hero h2{ font-family:'Fraunces',serif;font-weight:700;font-size:16px; line-height:1.25;color:var(--ink);margin-bottom:8px;max-width:15ch; } .fs-hero h2 em{font-style:italic;color:var(--orange);} .fs-hero p{font-size:10.5px;line-height:1.5;color:var(--ink3);margin-bottom:12px;max-width:22ch;} .fs-cta{ display:inline-flex;align-items:center;gap:5px; background:var(--ink);color:var(--cream); font-size:10px;font-weight:500; padding:8px 13px;border-radius:100px; } .fs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 16px 0;} .fs-card{ background:var(--cream2);border:1px solid var(--border2); border-radius:12px;padding:10px 10px 12px; } .fs-card .k{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:5px;} .fs-card .t{font-family:'Fraunces',serif;font-weight:700;font-size:11.5px;color:var(--ink);} .fs-footer{ margin-top:16px;padding:12px 18px 22px; font-family:'DM Mono',monospace;font-size:8.5px;color:var(--ink3); display:flex;justify-content:space-between; } .phone-caption{ text-align:center;font-family:'DM Mono',monospace; font-size:11.5px;color:var(--ink3);max-width:250px;line-height:1.6; } .phone-caption b{color:var(--ink2);font-weight:500;} /* ---------- PANEL ---------- */ .panel{ background:var(--cream); border:1px solid var(--border2); border-radius:16px;overflow:hidden; display:flex;flex-direction:column;height:600px; box-shadow:0 24px 48px rgba(26,24,20,.1); } @media(max-width:860px){.panel{height:560px;}} @media(max-width:480px){.panel{height:530px;}} .panel-tabs{ display:flex;align-items:center; border-bottom:1px solid var(--border2); padding:0 8px;background:var(--cream2); flex:none; } .tab{ appearance:none;background:none;border:none; font-family:'DM Mono',monospace;font-size:12px; color:var(--ink3);padding:16px 16px 14px; cursor:pointer;display:flex;align-items:center;gap:7px; position:relative;transition:color .15s ease; } .tab:hover{color:var(--ink2);} .tab.active{color:var(--ink);} .tab.active::after{ content:"";position:absolute;left:16px;right:16px;bottom:-1px; height:2px;background:var(--orange);border-radius:2px 2px 0 0; } .tab-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none;animation:pulse 2.5s ease-in-out infinite;} .panel-meta{ margin-left:auto;align-self:center;padding-right:16px; font-family:'DM Mono',monospace;font-size:10.5px;color:var(--ink3); display:flex;align-items:center;gap:6px; } .panel-meta .d{width:5px;height:5px;border-radius:50%;background:var(--lime);} .view{flex:1;display:none;flex-direction:column;min-height:0;} .view.active{display:flex;} /* --- chat: mörkt tema --- */ .chat-scroll{ flex:1;overflow-y:auto;background:var(--ink); padding:22px 20px 10px; display:flex;flex-direction:column;gap:10px; } .chat-scroll::-webkit-scrollbar{width:6px;} .chat-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:6px;} .msg{ max-width:80%;padding:10px 14px;border-radius:18px; font-size:13px;line-height:1.55; opacity:0;animation:rise .3s ease forwards; } .msg.user{ align-self:flex-start; background:#2b2822;color:rgba(255,255,255,.9); border-radius:4px 18px 18px 18px; } .msg.bot{ align-self:flex-end; background:var(--lime);color:var(--ink); border-radius:18px 4px 18px 18px;font-weight:400; } .msg-label{ display:block;font-family:'DM Mono',monospace;font-size:9.5px; margin-bottom:5px;opacity:.6; } .typing{ align-self:flex-end;display:flex;gap:5px; padding:11px 14px;background:var(--lime); border-radius:18px 4px 18px 18px; } .typing span{width:6px;height:6px;border-radius:50%;background:rgba(26,24,20,.4);animation:td 1.3s ease-in-out infinite;} .typing span:nth-child(2){animation-delay:.2s;} .typing span:nth-child(3){animation-delay:.4s;} .booking-card{ align-self:flex-end;max-width:84%; background:var(--cream);color:var(--ink); border-radius:14px;padding:14px 16px 16px; opacity:0;animation:rise .3s ease forwards; } .booking-card .bh{ display:flex;align-items:center;gap:8px; font-family:'DM Mono',monospace;font-size:9.5px; text-transform:uppercase;letter-spacing:.08em;color:#4a6e0a; margin-bottom:10px; } .booking-card .bh::before{ content:"✓";display:inline-flex;align-items:center;justify-content:center; width:16px;height:16px;border-radius:50%;background:var(--lime-bg);color:#2e4a00;font-size:9px; } .booking-card .slot{font-family:'Fraunces',serif;font-weight:700;font-size:14.5px;margin-bottom:3px;} .booking-card .addr{font-size:11.5px;color:var(--ink3);} .chip-row{ flex:none;padding:14px 16px 18px; border-top:1px solid rgba(255,255,255,.08); background:var(--ink); display:flex;flex-wrap:wrap;gap:8px; } .chip{ appearance:none;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.9); font-family:'DM Sans',sans-serif;font-size:12.5px; padding:9px 13px;border-radius:100px;cursor:pointer; transition:border-color .15s ease,background .15s ease,transform .1s ease; } .chip:hover{border-color:var(--lime);background:rgba(181,217,41,.1);} .chip:active{transform:scale(.97);} .chip:disabled{opacity:.3;cursor:default;} .chip:disabled:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06);} .chat-restart{ font-family:'DM Mono',monospace;font-size:11px;color:var(--ink3); background:var(--ink);border:none;cursor:pointer; padding:0 20px 14px;align-self:flex-start; text-decoration:underline;text-underline-offset:3px; display:none;color:rgba(255,255,255,.5); } .chat-restart.show{display:inline-flex;} /* --- mail: ljust tema --- */ .mail{flex:1;overflow-y:auto;padding:20px 22px 24px;background:var(--cream);} .mail-note{ font-family:'DM Mono',monospace;font-size:10.5px;color:var(--ink3); margin-bottom:14px; } .mail-thread{ border:1px solid var(--border2);border-radius:12px;overflow:hidden;background:var(--cream); } .mail-item{padding:16px 18px;border-bottom:1px solid var(--border);} .mail-item:last-child{border-bottom:none;} .mail-item.ai{background:var(--lime-bg);} .mail-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:10px;} .mail-from{font-weight:500;font-size:13px;color:var(--ink);display:flex;align-items:center;flex-wrap:wrap;gap:8px;} .mail-from .tag{ font-family:'DM Mono',monospace;font-size:9px;color:var(--orange); border:1px solid var(--orange-bg);background:var(--orange-bg); padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.05em; } .mail-time{font-family:'DM Mono',monospace;font-size:10.5px;color:var(--ink3);flex:none;} .mail-subject{font-size:11.5px;color:var(--ink3);margin-bottom:8px;} .mail-body{font-size:13px;line-height:1.65;color:var(--ink2);} .mail-body p{margin:0 0 10px;} .mail-body p:last-child{margin-bottom:0;} /* ---------- DISCLAIMER ---------- */ .disclaimer{max-width:1160px;margin:0 auto;padding:0 40px 60px;} @media(max-width:768px){.disclaimer{padding:0 20px 48px;}} .disclaimer p{ font-family:'DM Mono',monospace;font-size:11.5px;line-height:1.7; color:var(--ink3);max-width:60ch; border-left:2px solid var(--border2);padding-left:14px; } /* ===================================================================== telefonvaxel.html (body.sida-telefonvaxel) ===================================================================== */ /* ---------- HERO HEADER ---------- */ .sida-telefonvaxel .hero-head{ position:relative; max-width:1160px;margin:0 auto; padding:calc(var(--nav-h) + 64px) 40px 8px; } .sida-telefonvaxel .hero-head::before{ content:""; position:absolute;top:0;left:50%; width:100vw;transform:translateX(-50%); height:380px; background:linear-gradient(to bottom, #f9c998 0%, var(--cream) 100%); z-index:0;pointer-events:none; } .sida-telefonvaxel .hero-head > *{position:relative;z-index:1;} @media(max-width:768px){.sida-telefonvaxel .hero-head{padding:calc(var(--nav-h) + 40px) 20px 8px;}} .sida-telefonvaxel .pill{margin-bottom:24px;align-self:auto;} .sida-telefonvaxel .hero-head h1{ font-family:'Fraunces',serif; font-size:clamp(32px,5.2vw,58px); line-height:1.1;font-weight:700; color:var(--ink); margin-bottom:18px;max-width:18ch; } .sida-telefonvaxel .hero-head h1 em{font-style:italic;color:var(--orange);} .sida-telefonvaxel .hero-head p{ font-size:1.02rem;line-height:1.75; color:var(--ink3);max-width:58ch;margin-bottom:36px; } /* Startsidans hero-regler under 900px gäller inte här — telefonväxeln staplar knapparna först under 600px. */ .sida-telefonvaxel .hero-btns{flex-direction:row;align-items:center;gap:16px;margin-bottom:48px;} .sida-telefonvaxel .btn-main{justify-content:normal;} .sida-telefonvaxel .btn-link{text-align:start;border-bottom:1px solid var(--border2);} @media(max-width:600px){ .sida-telefonvaxel .hero-btns{flex-direction:column;align-items:stretch;gap:14px;} .sida-telefonvaxel .btn-main{justify-content:center;} .sida-telefonvaxel .btn-link{text-align:center;border-bottom:none;} } .sida-telefonvaxel .hero-proof{ margin-top:0;display:flex;grid-template-columns:none;gap:40px;padding-top:36px;border-top:1px solid var(--border); } @media(max-width:700px){ .sida-telefonvaxel .hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} } .sida-telefonvaxel .proof-item{flex:0 1 auto;min-width:auto;} .sida-telefonvaxel .proof-item .n{font-size:2rem;white-space:normal;} .sida-telefonvaxel .proof-item .l{font-size:.75rem;} @media(max-width:700px){.sida-telefonvaxel .proof-item .n{font-size:1.4rem;}.sida-telefonvaxel .proof-item .l{font-size:.68rem;}} /* --- SECTION COMMON --- */ .sida-telefonvaxel h2{font-size:clamp(32px,4vw,52px);line-height:1.08;} .sida-telefonvaxel .section-intro{max-width:560px;margin-bottom:56px;} /* --- PROBLEM / FEATURES --- */ /* Ingen persikotoning här — den hör till startsidans hero/#problem-skarv */ .sida-telefonvaxel #problem{position:static;} .sida-telefonvaxel #problem::before{content:none;} .sida-telefonvaxel #problem .container{position:static;z-index:auto;} .sida-telefonvaxel .prob-icon{background:var(--orange-bg);} .sida-telefonvaxel .feat-icon{background:var(--lime-bg);} /* --- BEFORE/AFTER --- */ /* Startsidans tabell har stiliserade .m-markörer — här ärver de bara texten */ .sida-telefonvaxel .cmp-before .m, .sida-telefonvaxel .cmp-after .m{font:inherit;color:inherit;flex-shrink:1;} /* --- PRICING --- */ @media(max-width:600px){.sida-telefonvaxel .price-panel > div:nth-child(4){font-size:.62rem!important;}} .sida-telefonvaxel .price-panel ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:16px;} .sida-telefonvaxel .price-panel li{font-size:.85rem;color:var(--ink2);line-height:1.5;display:flex;gap:8px;align-items:flex-start;} .sida-telefonvaxel .price-panel li span{color:var(--orange);flex-shrink:0;} @media(max-width:600px){.sida-telefonvaxel .price-panel li{line-height:1.4;}} /* ---------- FAQ LIST ---------- */ /* .faq-wrap sitter ihop med .container här — behåll containerns padding */ .sida-telefonvaxel .faq-wrap{padding:0 40px;} @media(max-width:768px){.sida-telefonvaxel .faq-wrap{padding:0 20px;}} .sida-telefonvaxel .faq-item{background:var(--cream2);} .sida-telefonvaxel .faq-item[open]{background:#fff;} /* --- END CTA --- */ .sida-telefonvaxel #end-cta .hero-btns{justify-content:center;margin-bottom:0;} /* ===================================================================== kontakta-oss.html + priser.html (body.sida-kontakta-oss / .sida-priser) ===================================================================== */ .sida-kontakta-oss .pill, .sida-priser .pill{margin-bottom:20px;align-self:auto;} .page-head .pill{margin-top:20px;} /* Innehållet direkt under sidrubriken — mindre luft än en vanlig section */ .page-section{padding-top:48px;} @media(max-width:768px){.page-section{padding-top:32px;}} /* Färgvarianter för .feat-icon (samma som startsidans inline-stilar) */ .feat-icon.icon-lime{background:var(--lime-bg);color:#4a6e0a;font-family:'DM Mono',monospace;font-size:.7rem;} .feat-icon.icon-blue{background:var(--blue-bg);color:var(--blue);font-family:'DM Mono',monospace;font-size:.7rem;} .feat-icon.icon-orange{background:var(--orange-bg);color:var(--orange);font-family:'DM Mono',monospace;font-size:.7rem;} .card-action{display:inline-flex;margin-top:22px;} /* Företagsrad under kontaktkorten */ .company-line{margin-top:40px;text-align:center;font-size:.85rem;color:var(--ink3);line-height:1.7;} .company-line a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border2);} .company-line a:hover{color:var(--orange);} /* Prispaneler (samma utseende som startsidans, men med klasser i stället för inline-stilar) */ .price-panel.cream{background:var(--cream);} .price-panel.white{background:#fff;} .price-label{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-bottom:20px;} .price-sub{font-size:.85rem;color:var(--ink3);margin-top:6px;} .price-list{list-style:none;display:flex;flex-direction:column;gap:12px;} .price-list li{font-size:.88rem;color:var(--ink);display:flex;gap:10px;} .price-list li span{color:var(--lime);font-weight:500;} .price-list li .platshallare{color:var(--orange);} .price-panel .btn-price-main{margin-top:36px;} .sida-priser #pricing{background:none;border-top:none;} .sida-priser .faq-wrap h2{margin-bottom:28px;} /* Tydligt markerad platshållare för text som Dennis måste skriva/godkänna innan publicering (priser, rabatter, villkor). Får inte finnas kvar live. */ .platshallare{ display:inline-block; background:var(--orange-bg);color:var(--orange); border:1px dashed var(--orange);border-radius:6px; padding:2px 8px; font-family:'DM Mono',monospace;font-size:.8rem;font-weight:500; letter-spacing:.02em;line-height:1.5; }