/* ============================================================ Dalecarlia Photo — gemensam bas Färgtemat sätts per sida via ============================================================ */ *{ margin:0; padding:0; box-sizing:border-box; } :root{ --paper:#FBFAF8; --hair:#E7E2DC; /* tre teman, exakta accenter ur Skagen-färgproverna */ --rose:#B03838; --rose-deep:#8E2C2C; --rose-soft:#F6EEED; --sol:#D77A2A; --sol-deep:#B5631E; --sol-soft:#F7F0E6; --hav:#2E6E8E; --hav-deep:#234F66; --hav-soft:#EAF0F3; } /* per-tema variabler: --acc styr allt accentfärgat */ body.rose{ --acc:var(--rose); --acc-deep:var(--rose-deep); --acc-soft:var(--rose-soft); --ink:#3A2E2C; --bodytext:#5E5350; --eyebrow:#a08886; } body.sol{ --acc:var(--sol); --acc-deep:var(--sol-deep); --acc-soft:var(--sol-soft); --ink:#2A2620; --bodytext:#55514E; --eyebrow:#9a8a6a; } body.hav{ --acc:var(--hav); --acc-deep:var(--hav-deep); --acc-soft:var(--hav-soft); --ink:#1F2D38; --bodytext:#4D5A63; --eyebrow:#7d8c94; } html{ scroll-behavior:smooth; } body{ font-family:'Work Sans',sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; } img{ display:block; width:100%; height:100%; object-fit:cover; } .wrap{ max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,40px); } /* ---- nav ---- */ .nav{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:18px clamp(20px,5vw,64px); background:rgba(251,250,248,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--hair); } .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; } .mark{ width:38px; height:36px; background-color:var(--acc); flex:0 0 auto; -webkit-mask:url('assets/horse-mask.png') no-repeat center/contain; mask:url('assets/horse-mask.png') no-repeat center/contain; } .brand .name{ font:500 24px/1 'Cormorant Garamond'; color:var(--acc); letter-spacing:.02em; } .nav-links{ display:flex; gap:26px; } .nav-links a{ font:400 14px/1 'Work Sans'; color:#6f6b64; text-decoration:none; transition:.2s; } .nav-links a:hover, .nav-links a.active{ color:var(--acc); } /* ---- hero ---- */ .hero{ display:grid; grid-template-columns:1.04fr .96fr; min-height:72vh; border-bottom:1px solid var(--hair); } .hero-copy{ padding:clamp(40px,6vw,80px) clamp(24px,5vw,64px); display:flex; flex-direction:column; justify-content:center; } .eyebrow{ display:flex; align-items:center; gap:14px; font:600 12px/1 'Work Sans'; letter-spacing:.2em; text-transform:uppercase; color:var(--eyebrow); margin-bottom:28px; } .eyebrow::before{ content:""; width:42px; height:1px; background:var(--acc); } .hero h1{ font:500 clamp(44px,6.4vw,82px)/1.02 'Cormorant Garamond'; } .hero h1 em{ font-style:italic; color:var(--acc); } .hero-sub{ margin-top:22px; max-width:430px; font:300 17px/1.7 'Work Sans'; color:var(--bodytext); } .hero-actions{ margin-top:34px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; } .btn{ display:inline-block; font:500 13px/1 'Work Sans'; letter-spacing:.04em; text-decoration:none; padding:14px 26px; background:var(--acc); color:#fff; border-radius:2px; transition:.25s; } .btn:hover{ background:var(--acc-deep); } .link-arrow{ font:500 14px/1 'Work Sans'; color:var(--acc); text-decoration:none; } .hero-img{ position:relative; } .hero-watermark{ position:absolute; right:24px; top:24px; width:120px; height:114px; z-index:2; opacity:.16; background-color:#fff; -webkit-mask:url('assets/horse-mask.png') no-repeat center/contain; mask:url('assets/horse-mask.png') no-repeat center/contain; } .hero-cap{ position:absolute; left:20px; bottom:18px; color:#fff; font:300 13px/1.5 'Work Sans'; z-index:2; text-shadow:0 1px 10px rgba(20,20,20,.5); } .hero-cap b{ display:block; font:500 18px/1 'Cormorant Garamond'; letter-spacing:.04em; } /* ---- intro ---- */ .intro{ padding:clamp(56px,8vw,96px) 0; text-align:center; } .intro .lead{ max-width:680px; margin:0 auto; font:400 clamp(20px,2.6vw,26px)/1.5 'Cormorant Garamond'; } .intro .body{ max-width:560px; margin:24px auto 0; font:300 16px/1.8 'Work Sans'; color:var(--bodytext); } /* ---- gallery ---- */ .gallery{ padding-bottom:clamp(40px,6vw,72px); } .gal-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; border-top:1px solid var(--hair); padding-top:20px; } .gal-head h2{ font:500 28px/1 'Cormorant Garamond'; } .gal-head span{ font:600 12px/1 'Work Sans'; letter-spacing:.16em; text-transform:uppercase; color:var(--eyebrow); } .grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; grid-auto-rows:170px; } .cell{ position:relative; overflow:hidden; border-radius:3px; } .cell::after{ content:attr(data-cap); position:absolute; left:12px; bottom:10px; color:#fff; font:300 12px/1.3 'Work Sans'; letter-spacing:.03em; text-shadow:0 1px 8px rgba(20,20,20,.7); opacity:0; transition:.3s; } .cell:hover::after{ opacity:1; } .c1{ grid-column:span 4; grid-row:span 2; } .c2,.c3,.c4,.c5{ grid-column:span 2; } .c6{ grid-column:span 4; } /* ---- feature band ---- */ .feature{ background:var(--acc-soft); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); } .feature-in{ max-width:1080px; margin:0 auto; padding:clamp(56px,7vw,90px) clamp(24px,5vw,40px); display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(30px,5vw,64px); align-items:center; } .feature .label{ font:600 12px/1 'Work Sans'; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); margin-bottom:18px; } .feature h3{ font:500 clamp(28px,3.6vw,40px)/1.15 'Cormorant Garamond'; } .feature .col p{ font:300 16px/1.8 'Work Sans'; color:var(--bodytext); margin-bottom:16px; } .feature .col p:last-child{ margin-bottom:0; } .stat-row{ display:flex; gap:40px; margin-top:30px; flex-wrap:wrap; } .stat b{ display:block; font:500 34px/1 'Cormorant Garamond'; color:var(--acc); } .stat span{ font:600 11px/1 'Work Sans'; letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); } /* ---- quote ---- */ .quote{ padding:clamp(56px,8vw,90px) 0; text-align:center; } .quote blockquote{ max-width:660px; margin:0 auto; font:400 italic clamp(22px,3vw,30px)/1.45 'Cormorant Garamond'; } .quote cite{ display:block; margin-top:20px; font:600 12px/1 'Work Sans'; letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); font-style:normal; } /* ---- contact ---- */ .contact{ padding:clamp(60px,8vw,100px) 0; text-align:center; } .contact h2{ font:500 clamp(30px,4vw,46px)/1.1 'Cormorant Garamond'; } .contact p{ margin:16px auto 30px; max-width:460px; font:300 16px/1.7 'Work Sans'; color:var(--bodytext); } /* ---- footer ---- */ footer{ border-top:1px solid var(--hair); padding:30px clamp(20px,5vw,64px); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; } footer .brand .name{ font-size:20px; } footer small{ font:300 13px/1.5 'Work Sans'; color:#9a948c; } @media(max-width:820px){ .hero{ grid-template-columns:1fr; } .hero-img{ min-height:320px; order:-1; } .grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; } .c1,.c2,.c3,.c4,.c5,.c6{ grid-column:span 1; grid-row:span 1; } .c1{ grid-column:span 2; } .feature-in{ grid-template-columns:1fr; } } @media(max-width:560px){ .nav-links{ gap:16px; } } /* ---- home / landing ---- */ .home-hero{ text-align:center; padding:clamp(70px,11vw,150px) clamp(20px,5vw,40px) clamp(50px,7vw,90px); } .home-hero .home-mark{ width:96px; height:90px; margin:0 auto 30px; background-color:#1F2D38; -webkit-mask:url('assets/horse-mask.png') no-repeat center/contain; mask:url('assets/horse-mask.png') no-repeat center/contain; } .home-hero h1{ font:500 clamp(40px,6vw,72px)/1.05 'Cormorant Garamond'; color:#1F2D38; letter-spacing:.01em; } .home-hero p{ max-width:520px; margin:20px auto 0; font:300 17px/1.7 'Work Sans'; color:#55514E; } .worlds{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-bottom:clamp(60px,9vw,110px); } .world-card{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:380px; padding:28px; border-radius:5px; overflow:hidden; text-decoration:none; color:#fff; transition:transform .3s; } .world-card:hover{ transform:translateY(-4px); } .world-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,20,20,.05), rgba(20,20,20,.5)); z-index:1; } .world-card > *{ position:relative; z-index:2; } .world-card .wc-mark{ width:46px; height:43px; margin-bottom:auto; background-color:rgba(255,255,255,.92); -webkit-mask:url('assets/horse-mask.png') no-repeat center/contain; mask:url('assets/horse-mask.png') no-repeat center/contain; } .world-card .wc-eyebrow{ font:600 11px/1 'Work Sans'; letter-spacing:.18em; text-transform:uppercase; opacity:.85; margin-bottom:8px; } .world-card h2{ font:500 30px/1 'Cormorant Garamond'; } .world-card .wc-go{ margin-top:14px; font:500 13px/1 'Work Sans'; opacity:.9; } .wc-sport{ background:linear-gradient(160deg,#3E5E70,#16323F); } .wc-land{ background:linear-gradient(160deg,#D88E48,#9C5A22); } .wc-port{ background:linear-gradient(160deg,#C99088,#9E5E58); } @media(max-width:760px){ .worlds{ grid-template-columns:1fr; } } /* ---- per-tema hero-bild & galleritoner ---- */ .hav .hero-img{ background:linear-gradient(168deg,#3E5E70 0%, #244F66 55%, #16323F 100%); } .hav .hero-img::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 50% at 35% 25%, rgba(127,163,176,.25), transparent 60%); } .hav .c1{ background:linear-gradient(150deg,#3D6076,#1C3F52); } .hav .c2{ background:linear-gradient(150deg,#557A8E,#2A5066); } .hav .c3{ background:linear-gradient(150deg,#456C82,#21465A); } .hav .c4{ background:linear-gradient(150deg,#5E8398,#305A70); } .hav .c5{ background:linear-gradient(150deg,#3A5E74,#1A3D50); } .hav .c6{ background:linear-gradient(150deg,#4A7088,#244C62); } .sol .hero-img{ background:linear-gradient(168deg,#F0D9B0 0%, #D88E48 48%, #9C5A22 100%); } .sol .hero-img::before{ content:""; position:absolute; left:0; right:0; top:60%; height:1px; background:rgba(255,255,255,.45); } .sol .c1{ background:linear-gradient(150deg,#E9C98C,#C07E36); } .sol .c2{ background:linear-gradient(150deg,#EAD7B4,#B98B4E); } .sol .c3{ background:linear-gradient(150deg,#DDBE86,#9C6A2E); } .sol .c4{ background:linear-gradient(150deg,#F0E2C4,#C89A58); } .sol .c5{ background:linear-gradient(150deg,#E3C284,#A86E30); } .sol .c6{ background:linear-gradient(150deg,#E4CC97,#B07A38); } .rose .hero-img{ background:linear-gradient(168deg,#E8CFC9 0%, #C99088 50%, #9E5E58 100%); } .rose .hero-img::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 50% at 65% 30%, rgba(255,245,242,.35), transparent 60%); } .rose .c1{ background:linear-gradient(150deg,#E2C0BA,#B47C76); } .rose .c2{ background:linear-gradient(150deg,#EAD2CD,#C2918B); } .rose .c3{ background:linear-gradient(150deg,#DCB8B2,#A66E68); } .rose .c4{ background:linear-gradient(150deg,#EFDAD6,#CB9C96); } .rose .c5{ background:linear-gradient(150deg,#E0BDB7,#A8716B); } .rose .c6{ background:linear-gradient(150deg,#E6C8C2,#B68179); }