/* ===== Sillan.dk – fælles styles + tre universer ===== */ :root{ --mist:#F3F5F3; --ink:#22302E; --hairline:#C9D1CC; --white:#FFFFFF; --maxw:1100px; /* Standard-accent (forside) */ --accent:#37756B; --accent-dark:#2A5C54; --tint:#E3EAE5; } /* Universer – sættes med klasse på */ body.univers-digital{ --accent:#2F6E78; --accent-dark:#245660; --tint:#E2ECED; } body.univers-fysisk{ --accent:#A9713C; --accent-dark:#8A5A2E; --tint:#F1E8DB; } body.univers-yoga{ --accent:#75618A; --accent-dark:#5D4C70; --tint:#EBE7F0; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation:none !important;transition:none !important;} } body{ font-family:'Instrument Sans',system-ui,sans-serif; background:var(--mist); color:var(--ink); line-height:1.6; font-size:1.0625rem; } h1,h2,h3{font-family:'Archivo',sans-serif;line-height:1.12;letter-spacing:-0.015em;} img{display:block;max-width:100%;height:auto;} a{color:var(--accent);} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;} /* ---------- Nav ---------- */ nav{ position:sticky;top:0;z-index:50; background:rgba(243,245,243,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--hairline); } .nav-inner{ max-width:var(--maxw);margin:0 auto;padding:.85rem 1.5rem; display:flex;align-items:center;justify-content:space-between;gap:1rem; } .logo{ font-family:'Archivo',sans-serif;font-weight:800;font-size:1.25rem; text-decoration:none;color:var(--ink);letter-spacing:-0.02em; } .logo span{color:var(--accent);} .nav-links{display:flex;gap:1.4rem;flex-wrap:wrap;} .nav-links a{text-decoration:none;color:var(--ink);font-weight:500;font-size:.95rem;} .nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--accent);} /* ---------- Hero ---------- */ header.hero{padding:5rem 0 3.5rem;} .eyebrow{ text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:600; color:var(--accent);margin-bottom:1.2rem; } .hero h1{font-size:clamp(2.3rem,6vw,4rem);font-weight:800;max-width:16ch;} .hero .sub{ margin-top:1.3rem;font-size:clamp(1.1rem,2.2vw,1.3rem); color:var(--accent-dark);font-weight:500; } .hero p.intro{margin-top:1.4rem;max-width:56ch;} .friction-line{margin-top:2.6rem;width:100%;overflow:hidden;} .friction-line svg{width:100%;height:auto;display:block;} .friction-line path{ stroke:var(--accent);stroke-width:3;fill:none; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:2400;stroke-dashoffset:2400; animation:draw 2.6s ease-out .3s forwards; } @keyframes draw{to{stroke-dashoffset:0;}} @media (prefers-reduced-motion: reduce){ .friction-line path{stroke-dashoffset:0;} } .line-labels{ display:flex;justify-content:space-between;margin-top:.4rem; font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-dark);font-weight:600; } /* ---------- Forsidens tre døre ---------- */ .doors{padding:1.5rem 0 4.5rem;} .door-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;} .door{ border-radius:18px;padding:2rem 1.6rem 1.8rem;text-decoration:none;color:var(--ink); display:flex;flex-direction:column;gap:.6rem; border:1.5px solid transparent; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .door:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(34,48,46,.10);} .door.d-digital{background:#E2ECED;} .door.d-fysisk{background:#F1E8DB;} .door.d-yoga{background:#EBE7F0;} .door.d-digital:hover{border-color:#2F6E78;} .door.d-fysisk:hover{border-color:#A9713C;} .door.d-yoga:hover{border-color:#75618A;} .door .icon svg{width:34px;height:34px;margin-bottom:.4rem;} .door.d-digital .icon svg{stroke:#2F6E78;} .door.d-fysisk .icon svg{stroke:#A9713C;} .door.d-yoga .icon svg{stroke:#75618A;} .door .where{ font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;font-weight:600; } .door.d-digital .where{color:#2F6E78;} .door.d-fysisk .where{color:#A9713C;} .door.d-yoga .where{color:#75618A;} .door h3{font-size:1.35rem;} .door p{font-size:.96rem;color:#43514f;} .door .price{margin-top:auto;padding-top:.8rem;font-size:.86rem;color:#5b6a67;} .door .go{ font-weight:700;font-size:.95rem;margin-top:.2rem; } .door.d-digital .go{color:#2F6E78;} .door.d-fysisk .go{color:#A9713C;} .door.d-yoga .go{color:#75618A;} /* ---------- Indholdssektioner ---------- */ section.service{padding:4.2rem 0;} section.service.tint{background:var(--tint);} .service-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;} .service-grid.flip .text{order:2;} .service-grid.flip .media{order:1;} .service h2{font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:700;margin:.4rem 0 1rem;} .service .media img{border-radius:16px;width:100%;object-fit:cover;} .service .media img.secondary{margin-top:1.2rem;max-height:420px;object-position:center top;} .media-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.2rem;} .media-pair img{border-radius:16px;width:100%;height:100%;object-fit:cover;object-position:center top;aspect-ratio:3/4;} .blocks{margin-top:1.4rem;display:grid;gap:1rem;} .blocks.cols2{grid-template-columns:1fr 1fr;gap:1.2rem 2.5rem;} @media (max-width:820px){.blocks.cols2{grid-template-columns:1fr;}} .block h4{font-family:'Archivo',sans-serif;font-size:.95rem;font-weight:700;margin-bottom:.15rem;} .block h4::before{content:"—";color:var(--accent);margin-right:.5rem;font-weight:800;} .block p{font-size:.97rem;color:#3d4b49;} .cta-row{margin-top:1.8rem;} .price{margin-top:.8rem;font-size:.88rem;color:#5b6a67;} .btn{ display:inline-block;background:var(--accent);color:#fff;text-decoration:none; font-weight:600;padding:.75rem 1.5rem;border-radius:999px;font-size:.97rem; transition:background .15s ease; } .btn:hover{background:var(--accent-dark);} .btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent);margin-left:.6rem;} .btn.ghost:hover{background:var(--accent);color:#fff;} .btn.ghost.light{color:var(--mist);border-color:var(--mist);} .btn.ghost.light:hover{background:var(--mist);color:var(--ink);} /* ---------- Om mig ---------- */ .about{padding:4.2rem 0;} .about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center;} .about img{border-radius:16px;} .about p{margin-top:1rem;max-width:58ch;} /* ---------- Stemningsbånd ---------- */ .mood-band{height:clamp(180px,32vw,320px);overflow:hidden;} .mood-band img{width:100%;height:100%;object-fit:cover;object-position:center 40%;} /* ---------- Kontakt ---------- */ .contact{background:var(--ink);color:var(--mist);padding:4.2rem 0 3rem;} .contact .eyebrow{color:var(--tint);} .contact h2{font-size:clamp(1.7rem,3.5vw,2.3rem);} .contact p{max-width:52ch;margin-top:1rem;color:#c9d4d0;} .contact .cta-row .btn{background:var(--accent);} .contact .cta-row .btn:hover{background:var(--accent-dark);} footer{ border-top:1px solid rgba(255,255,255,.15);margin-top:3rem;padding-top:1.4rem; font-size:.85rem;color:#9fb0ac;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem; } footer a{color:#9fb0ac;} /* ---------- Universbanner på undersider ---------- */ .univers-tag{ display:inline-flex;align-items:center;gap:.5rem; background:var(--tint);border-radius:999px;padding:.4rem 1rem; font-size:.85rem;font-weight:600;color:var(--accent-dark);margin-bottom:1.2rem; } .univers-tag svg{width:18px;height:18px;stroke:var(--accent);} /* ---------- Responsivt ---------- */ @media (max-width:820px){ .door-grid{grid-template-columns:1fr;} .service-grid,.about-grid{grid-template-columns:1fr;gap:1.8rem;} .service-grid.flip .text{order:1;} .service-grid.flip .media{order:2;} header.hero{padding:3.2rem 0 2.6rem;} .nav-links{gap:1rem;font-size:.9rem;} } :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;}