/* ============================================================ Sabine Lindeberg — Lag 3: Komponenter (delt på tværs af sider) ============================================================ Indeholder al CSS som tidligere blev duplikeret pr. side i `extraHead`. Hentes én gang i via head.njk. Hver side må stadig have lokal `extraHead` til: - hero-bg billede (varierer pr. side) - side-unikke sektioner (services, form, gallery, ...) - lokale overrides Designtokens (farver, fonte) kommer fra base.css + skin. ============================================================ */ /* ========== BUTTONS ========== */ .btn { display: inline-block; padding: 15px 36px; border-radius: 6px; font-family: var(--font-body); font-size: 16px; font-weight: 500; letter-spacing: 0.5px; transition: var(--transition); cursor: pointer; border: none; } .btn-gold { background: var(--gold); color: var(--petrol); } .btn-gold:hover { background: var(--gold-light); color: var(--petrol); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3); } .btn-outline { background: transparent; color: var(--gold); border: 1px solid rgba(212, 175, 55, 0.4); } .btn-outline:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.08); color: var(--gold); } .btn-teal { background: var(--teal); color: #FFFFFF; } .btn-teal:hover { background: var(--teal-light); color: #FFFFFF; transform: translateY(-2px); } /* ========== SECTION LABELS ========== */ .section-label { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } /* ========== HERO (fælles base) ========== Hver side sætter sit eget .hero-bg { background-image: url(...) } i extraHead. */ .hero { position: relative; min-height: 80vh; display: flex; align-items: center; background: var(--petrol); overflow: hidden; padding-top: 72px; } .hero-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0.15; filter: blur(1px); } .hero-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 250px; background: linear-gradient(to top, var(--petrol), transparent); } .hero-swoosh { position: absolute; bottom: 15%; left: -5%; right: -5%; z-index: 1; opacity: 0.35; } .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; text-align: center; } .hero-label { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; opacity: 0.9; } .hero h1 { font-size: clamp(40px, 6vw, 62px); font-weight: 400; color: #FFFFFF; margin-bottom: 10px; font-style: italic; } .hero-tagline { font-family: var(--font-display); font-size: clamp(18px, 2.5vw, 23px); font-weight: 400; color: rgba(255,255,255,0.7); margin-bottom: 20px; max-width: 700px; } /* ========== INTRO ========== */ .intro { padding: 100px 0; background: var(--sand); } .intro-inner { max-width: 720px; margin: 0 auto; text-align: center; } .intro h2 { font-size: clamp(28px, 4vw, 42px); font-style: italic; margin-bottom: 28px; color: var(--petrol); } .intro p { font-size: 18px; color: var(--text); line-height: 1.9; margin-bottom: 16px; } /* ========== CONTENT SECTIONS (delte indre side-blokke) ========== */ .content-section { padding: 80px 0; background: #FFFFFF; } .content-section:nth-child(even) { background: var(--sand-light); } .content-section-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .content-text h2 { font-size: clamp(28px, 4vw, 38px); font-style: italic; color: var(--petrol); margin-bottom: 24px; } .content-text p { font-size: 18px; color: var(--text); line-height: 1.9; margin-bottom: 16px; } .content-list { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; } .list-item { display: flex; align-items: flex-start; gap: 14px; font-size: 18px; color: var(--text); line-height: 1.6; } .list-item::before { content: ''; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; flex-shrink: 0; margin-top: 10px; } .content-image { position: relative; } .content-image img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center; box-shadow: 0 20px 60px rgba(0,0,0,0.1); } .content-image::after { content: ''; position: absolute; bottom: -12px; right: -12px; width: 100%; height: 100%; border: 1px solid rgba(212, 175, 55, 0.25); border-radius: var(--radius); z-index: -1; } /* ========== CTA SECTION ========== */ .cta-section { padding: 100px 0; background: #FFFFFF; text-align: center; } .cta-section h2 { font-size: clamp(28px, 4vw, 44px); font-style: italic; margin-bottom: 18px; color: var(--petrol); } .cta-section p { font-size: 18px; color: var(--text); max-width: 520px; margin: 0 auto 36px; } .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ========== RESPONSIVE (delt) ========== */ @media (max-width: 960px) { .content-section-inner { grid-template-columns: 1fr; text-align: center; } .content-list { align-items: center; } } @media (max-width: 680px) { .cta-buttons { flex-direction: column; align-items: center; } .content-section-inner { gap: 40px; } } /* ========== VIEW TRANSITIONS (FE6) ========== */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-fade-out 0.25s ease; } ::view-transition-new(root) { animation: vt-fade-in 0.25s ease; } @keyframes vt-fade-out { to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } } /* ========== CSS @property gradient animation (FE3) ========== */ @property --grad-angle { syntax: ''; initial-value: 135deg; inherits: false; } @keyframes gradient-shift { 0% { --grad-angle: 135deg; } 50% { --grad-angle: 225deg; } 100% { --grad-angle: 135deg; } } @media (prefers-reduced-motion: no-preference) { .btn-gold.gradient-animated { animation: gradient-shift 6s ease-in-out infinite; background: linear-gradient(var(--grad-angle), var(--gold), #B8941E, var(--gold-light)); background-size: 200% 200%; } }