/* ============================================================ letsgethooked.no — template CSS ------------------------------------------------------------ Felles HTML-struktur renderes av 404.html. Hvilken template som vises styres av class på : .lgh-template-mono — Mono Minimal (tech/utviklere) .lgh-template-sage — Sage Calm (wellness) .lgh-template-blush — Blush (ungdomslig, feminin) .lgh-template-indie — Indie (kreativ) .lgh-template-byline — Byline (journalist) .lgh-template-bronze — Bronze (business) .lgh-template-noir — Noir (minimalist) .lgh-template-twilight — Twilight (kunstner) .lgh-template-pulse — Pulse (sport/energisk) ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; } .lgh-page { max-width: 600px; margin: 0 auto; padding: 40px 24px 60px; } .lgh-card-vk { display: flex; flex-direction: column; } .lgh-photo { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .lgh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .lgh-photo .initials { font-family: 'Archivo Black', sans-serif; } .lgh-save-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; } .lgh-save-contact, .lgh-save-image { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 10px; border: none; cursor: pointer; font-weight: 600; line-height: 1; text-decoration: none; } .lgh-save-contact svg, .lgh-save-image svg { width: 16px; height: 16px; flex-shrink: 0; } @media (max-width: 480px) { .lgh-save-actions { grid-template-columns: 1fr; } } .lgh-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; } .lgh-action-btn { text-decoration: none; padding: 13px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; cursor: pointer; border: none; } .lgh-action-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .lgh-socials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; } .lgh-social-btn { text-decoration: none; padding: 12px 8px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } /* ==================================================== MONO MINIMAL ==================================================== */ .lgh-template-mono { background: #FAFAF8; color: #181816; font-family: 'Inter', system-ui, sans-serif; } .lgh-template-mono .lgh-card-vk { border-top: 2px solid #181816; border-bottom: 2px solid #181816; padding: 28px 0; } .lgh-template-mono .lgh-photo { width: 110px; height: 110px; border: 2px solid #181816; background: #D2D2CD; } .lgh-template-mono .lgh-photo .initials { font-size: 2.8rem; color: #FAFAF8; } .lgh-template-mono .lgh-name { font-family: 'Archivo Black', sans-serif; font-size: 2.4rem; line-height: 1; letter-spacing: -0.02em; margin: 22px 0 4px; } .lgh-template-mono .lgh-firstname { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #4A6FA5; margin-bottom: 4px; } .lgh-template-mono .lgh-surname { display: block; } .lgh-template-mono .lgh-role { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #66665E; margin-top: 8px; padding-top: 12px; border-top: 1px solid #181816; width: 50%; } .lgh-template-mono .lgh-location { font-size: 0.95rem; color: #66665E; margin-top: 6px; } .lgh-template-mono .lgh-bio { font-size: 1.05rem; font-weight: 500; line-height: 1.4; margin-top: 18px; } .lgh-template-mono .lgh-save-contact { background: #4A6FA5; color: #FAFAF8; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; } .lgh-template-mono .lgh-save-image { background: #181816; color: #FAFAF8; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; } .lgh-template-mono .lgh-action-btn { background: #181816; color: #FAFAF8; font-family: 'JetBrains Mono', monospace; } .lgh-template-mono .lgh-action-btn:hover { background: #4A6FA5; } .lgh-template-mono .lgh-social-btn { background: transparent; color: #181816; border: 1.5px solid #181816; font-family: 'JetBrains Mono', monospace; } .lgh-template-mono .lgh-social-btn:hover { background: #181816; color: #FAFAF8; } /* ==================================================== SAGE CALM ==================================================== */ .lgh-template-sage { background: #AFBEA0; color: #3A4030; font-family: 'Inter', system-ui, sans-serif; } .lgh-template-sage .lgh-page { text-align: center; max-width: 560px; } .lgh-template-sage .lgh-card-vk { align-items: center; } .lgh-template-sage .lgh-photo { width: 150px; height: 150px; border-radius: 50%; background: #F8F4EB; padding: 6px; } .lgh-template-sage .lgh-photo img { border-radius: 50%; } .lgh-template-sage .lgh-photo .initials { font-size: 3.4rem; color: #AFBEA0; } .lgh-template-sage .lgh-name { font-family: 'Cormorant', serif; font-style: italic; font-weight: 500; font-size: 3rem; line-height: 0.95; margin: 24px 0 4px; } .lgh-template-sage .lgh-firstname { display: block; } .lgh-template-sage .lgh-surname { font-style: normal; font-weight: 400; font-size: 1.35rem; display: block; margin-top: 4px; } .lgh-template-sage .lgh-role { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; margin-top: 24px; } .lgh-template-sage .lgh-location { font-family: 'Cormorant', serif; font-style: italic; font-size: 0.95rem; color: #5C6450; margin-top: 6px; } .lgh-template-sage .lgh-bio { font-family: 'Cormorant', serif; font-style: italic; font-size: 1.1rem; margin-top: 18px; max-width: 380px; } .lgh-template-sage .lgh-save-actions { width: 100%; } .lgh-template-sage .lgh-save-contact { background: #3A4030; color: #F8F4EB; border-radius: 999px; border: 1.5px solid #3A4030; font-family: 'Inter', sans-serif; font-size: 0.85rem; letter-spacing: 0.02em; } .lgh-template-sage .lgh-save-image { background: transparent; color: #3A4030; border-radius: 999px; border: 1.5px solid #3A4030; font-family: 'Inter', sans-serif; font-size: 0.85rem; letter-spacing: 0.02em; } .lgh-template-sage .lgh-actions { width: 100%; } .lgh-template-sage .lgh-action-btn { background: #F8F4EB; color: #3A4030; border-radius: 8px; border: 1px solid rgba(58,64,48,0.15); font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0; text-transform: none; font-weight: 500; } .lgh-template-sage .lgh-action-btn:hover { border-color: #3A4030; } .lgh-template-sage .lgh-socials { width: 100%; } .lgh-template-sage .lgh-social-btn { background: transparent; color: #3A4030; border: 1px solid rgba(58,64,48,0.25); border-radius: 999px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.78rem; letter-spacing: 0; } .lgh-template-sage .lgh-social-btn:hover { background: #3A4030; color: #F8F4EB; } /* ==================================================== BLUSH (ungdomslig, feminin) Designet med inspirasjon fra editorial fashion-magasiner — varm cream, dusty rose, dyp plum. Fraunces serif med karakter. Litt mer organisk enn de to andre. ==================================================== */ .lgh-template-blush { background: #F4E6DC; color: #3C2A33; font-family: 'Inter', system-ui, sans-serif; background-image: radial-gradient(circle at 20% 30%, rgba(201,155,146,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(240,214,205,0.15) 0%, transparent 50%); } .lgh-template-blush .lgh-page { max-width: 540px; } .lgh-template-blush .lgh-card-vk { background: rgba(250,243,236,0.4); padding: 32px 26px; border-radius: 20px; border: 1px solid rgba(181,133,144,0.2); } .lgh-template-blush .lgh-photo { width: 140px; height: 140px; border-radius: 50%; border: 3px solid #C99B92; background: #F0D6CD; align-self: center; } .lgh-template-blush .lgh-photo img { border-radius: 50%; } .lgh-template-blush .lgh-photo .initials { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 3.2rem; color: #FAF3EC; } .lgh-template-blush .lgh-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 2.6rem; line-height: 1.05; letter-spacing: -0.01em; text-align: center; margin: 24px 0 4px; } .lgh-template-blush .lgh-firstname { display: block; } .lgh-template-blush .lgh-surname { display: block; font-style: italic; font-weight: 400; font-size: 1.5rem; color: #B58590; margin-top: 4px; } .lgh-template-blush .lgh-role { text-align: center; margin-top: 18px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: #6B4F5B; padding-top: 14px; position: relative; } .lgh-template-blush .lgh-role::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 1px; background: #C99B92; } .lgh-template-blush .lgh-location { text-align: center; font-family: 'Fraunces', serif; font-style: italic; font-size: 1rem; color: #B58590; margin-top: 8px; } .lgh-template-blush .lgh-bio { text-align: center; font-family: 'Fraunces', serif; font-style: italic; font-size: 1.05rem; color: #3C2A33; margin-top: 18px; padding: 0 8px; line-height: 1.4; } .lgh-template-blush .lgh-save-actions { margin-top: 28px; } .lgh-template-blush .lgh-save-contact { background: #3C2A33; color: #FAF3EC; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: none; } .lgh-template-blush .lgh-save-contact:hover { background: #5A4250; } .lgh-template-blush .lgh-save-image { background: transparent; color: #3C2A33; border: 1px solid #C99B92; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: none; } .lgh-template-blush .lgh-save-image:hover { background: #C99B92; color: #FAF3EC; } .lgh-template-blush .lgh-action-btn { background: #FAF3EC; color: #3C2A33; border: 1px solid rgba(181,133,144,0.3); border-radius: 14px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.08em; } .lgh-template-blush .lgh-action-btn:hover { background: #F0D6CD; border-color: #C99B92; } .lgh-template-blush .lgh-social-btn { background: transparent; color: #3C2A33; border: 1px solid rgba(181,133,144,0.4); border-radius: 999px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; } .lgh-template-blush .lgh-social-btn:hover { background: #C99B92; color: #FAF3EC; border-color: #C99B92; } /* ==================================================== INDIE (NTNU-gründer, dark mode, energetic) ==================================================== */ .lgh-template-indie { background: #0F1729; color: #E8EDF5; font-family: 'Inter', system-ui, sans-serif; background-image: radial-gradient(circle at 20% 10%, rgba(199,248,86,0.06) 0%, transparent 40%), radial-gradient(circle at 80% 90%, rgba(199,248,86,0.04) 0%, transparent 40%); } .lgh-template-indie .lgh-card-vk { padding: 28px 0; } .lgh-template-indie .lgh-photo { width: 120px; height: 120px; border: 2px solid #C7F856; background: #1A2238; } .lgh-template-indie .lgh-photo .initials { font-size: 3rem; color: #C7F856; } .lgh-template-indie .lgh-name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em; margin: 24px 0 4px; text-transform: uppercase; } .lgh-template-indie .lgh-firstname { display: inline; color: #C7F856; } .lgh-template-indie .lgh-surname { display: inline; } .lgh-template-indie .lgh-role { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #94A3B8; margin-top: 14px; display: inline-block; padding: 6px 12px; border: 1px solid rgba(199,248,86,0.4); border-radius: 4px; } .lgh-template-indie .lgh-location { font-size: 0.95rem; color: #94A3B8; margin-top: 10px; } .lgh-template-indie .lgh-bio { font-size: 1.05rem; line-height: 1.4; margin-top: 18px; color: #E8EDF5; max-width: 420px; } .lgh-template-indie .lgh-save-contact { background: #C7F856; color: #0F1729; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 6px; } .lgh-template-indie .lgh-save-contact:hover { background: #B8E840; } .lgh-template-indie .lgh-save-image { background: transparent; color: #C7F856; border: 1px solid #C7F856; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 6px; } .lgh-template-indie .lgh-save-image:hover { background: #C7F856; color: #0F1729; } .lgh-template-indie .lgh-action-btn { background: #1A2238; color: #E8EDF5; border-radius: 6px; border: 1px solid rgba(232,237,245,0.08); font-family: 'JetBrains Mono', monospace; } .lgh-template-indie .lgh-action-btn:hover { background: #243156; border-color: #C7F856; } .lgh-template-indie .lgh-social-btn { background: transparent; color: #E8EDF5; border: 1px solid rgba(232,237,245,0.2); border-radius: 4px; font-family: 'JetBrains Mono', monospace; } .lgh-template-indie .lgh-social-btn:hover { background: #C7F856; color: #0F1729; border-color: #C7F856; } /* ==================================================== BYLINE (journalist, editorial newsprint) ==================================================== */ .lgh-template-byline { background: #F5F0E6; color: #1A1A1A; font-family: 'Inter', system-ui, sans-serif; } .lgh-template-byline .lgh-card-vk { padding: 32px 0; border-top: 4px double #1A1A1A; border-bottom: 1px solid #1A1A1A; } .lgh-template-byline .lgh-photo { width: 130px; height: 130px; border: 1px solid #1A1A1A; background: #D8D2C5; } .lgh-template-byline .lgh-photo .initials { font-family: 'Source Serif 4', 'Lora', serif; font-weight: 600; font-size: 3rem; color: #F5F0E6; } .lgh-template-byline .lgh-name { font-family: 'Source Serif 4', 'Lora', serif; font-weight: 600; font-size: 2.6rem; line-height: 1.05; letter-spacing: -0.01em; margin: 20px 0 4px; } .lgh-template-byline .lgh-firstname { display: inline; } .lgh-template-byline .lgh-surname { display: inline; font-style: italic; font-weight: 500; } .lgh-template-byline .lgh-role { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: #A03028; margin-top: 14px; } .lgh-template-byline .lgh-location { font-family: 'Source Serif 4', 'Lora', serif; font-style: italic; font-size: 1rem; color: #555; margin-top: 6px; } .lgh-template-byline .lgh-bio { font-family: 'Source Serif 4', 'Lora', serif; font-size: 1.1rem; line-height: 1.5; margin-top: 18px; max-width: 480px; color: #1A1A1A; } .lgh-template-byline .lgh-bio::before { content: '"'; font-size: 2rem; line-height: 0; vertical-align: -0.4em; margin-right: 2px; color: #A03028; } .lgh-template-byline .lgh-bio::after { content: '"'; font-size: 2rem; line-height: 0; vertical-align: -0.4em; margin-left: 2px; color: #A03028; } .lgh-template-byline .lgh-save-contact { background: #1A1A1A; color: #F5F0E6; font-family: 'Inter', sans-serif; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 0; } .lgh-template-byline .lgh-save-contact:hover { background: #A03028; } .lgh-template-byline .lgh-save-image { background: transparent; color: #1A1A1A; border: 1px solid #1A1A1A; font-family: 'Inter', sans-serif; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 0; } .lgh-template-byline .lgh-save-image:hover { background: #A03028; color: #F5F0E6; border-color: #A03028; } .lgh-template-byline .lgh-action-btn { background: transparent; color: #1A1A1A; border: 1px solid #1A1A1A; border-radius: 0; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.12em; } .lgh-template-byline .lgh-action-btn:hover { background: #1A1A1A; color: #F5F0E6; } .lgh-template-byline .lgh-social-btn { background: transparent; color: #1A1A1A; border: 1px solid #1A1A1A; border-radius: 0; font-family: 'Inter', sans-serif; font-weight: 500; } .lgh-template-byline .lgh-social-btn:hover { background: #A03028; color: #F5F0E6; border-color: #A03028; } /* ==================================================== BRONZE (kvinnelig gründer, refined, gold accent) ==================================================== */ .lgh-template-bronze { background: #F0EAE0; color: #2D2018; font-family: 'Inter', system-ui, sans-serif; background-image: radial-gradient(circle at 10% 20%, rgba(184,148,94,0.06) 0%, transparent 40%); } .lgh-template-bronze .lgh-card-vk { padding: 36px 32px; background: rgba(255,253,248,0.6); border: 1px solid rgba(184,148,94,0.25); border-radius: 4px; align-items: center; } .lgh-template-bronze .lgh-photo { width: 140px; height: 140px; border: 1px solid #B8945E; background: #E5D9C3; } .lgh-template-bronze .lgh-photo .initials { font-family: 'Playfair Display', 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 3.4rem; color: #F0EAE0; } .lgh-template-bronze .lgh-name { font-family: 'Playfair Display', 'Fraunces', serif; font-weight: 500; font-size: 2.8rem; line-height: 1.05; letter-spacing: -0.01em; text-align: center; margin: 24px 0 4px; } .lgh-template-bronze .lgh-firstname { display: block; } .lgh-template-bronze .lgh-surname { display: block; font-style: italic; font-weight: 400; font-size: 1.4rem; color: #7A5670; margin-top: 2px; } .lgh-template-bronze .lgh-role { text-align: center; margin-top: 22px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: #6B5A47; padding: 10px 16px; border-top: 1px solid #B8945E; border-bottom: 1px solid #B8945E; display: inline-block; align-self: center; } .lgh-template-bronze .lgh-location { text-align: center; font-family: 'Playfair Display', 'Fraunces', serif; font-style: italic; font-size: 1rem; color: #7A5670; margin-top: 8px; } .lgh-template-bronze .lgh-bio { text-align: center; font-family: 'Playfair Display', 'Fraunces', serif; font-size: 1.1rem; font-style: italic; color: #2D2018; margin-top: 18px; max-width: 380px; line-height: 1.45; } .lgh-template-bronze .lgh-save-actions { width: 100%; max-width: 420px; } .lgh-template-bronze .lgh-save-contact { background: #2D2018; color: #F0EAE0; border: 1px solid #2D2018; font-family: 'Inter', sans-serif; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 0; padding: 16px; } .lgh-template-bronze .lgh-save-contact:hover { background: #B8945E; border-color: #B8945E; } .lgh-template-bronze .lgh-save-image { background: transparent; color: #2D2018; border: 1px solid #B8945E; font-family: 'Inter', sans-serif; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 0; padding: 16px; } .lgh-template-bronze .lgh-save-image:hover { background: #B8945E; color: #F0EAE0; border-color: #B8945E; } .lgh-template-bronze .lgh-actions { width: 100%; max-width: 420px; } .lgh-template-bronze .lgh-action-btn { background: transparent; color: #2D2018; border: 1px solid rgba(184,148,94,0.4); border-radius: 0; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.16em; } .lgh-template-bronze .lgh-action-btn:hover { background: #B8945E; color: #F0EAE0; border-color: #B8945E; } .lgh-template-bronze .lgh-socials { width: 100%; max-width: 420px; } .lgh-template-bronze .lgh-social-btn { background: transparent; color: #2D2018; border: 1px solid rgba(184,148,94,0.4); border-radius: 0; font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: 0.14em; } .lgh-template-bronze .lgh-social-btn:hover { background: #B8945E; color: #F0EAE0; border-color: #B8945E; } /* ==================================================== NOIR (sort/hvitt, monokrom) ==================================================== */ .lgh-template-noir { background: #FFFFFF; color: #000000; font-family: 'Inter', system-ui, sans-serif; } .lgh-template-noir .lgh-card-vk { padding: 32px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; } .lgh-template-noir .lgh-photo { width: 130px; height: 130px; filter: grayscale(100%); border: none; background: #000; } .lgh-template-noir .lgh-photo .initials { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 3rem; color: #FFFFFF; } .lgh-template-noir .lgh-name { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 2.8rem; line-height: 1; letter-spacing: -0.03em; margin: 22px 0 4px; text-transform: uppercase; } .lgh-template-noir .lgh-firstname { display: inline; } .lgh-template-noir .lgh-surname { display: inline; font-weight: 400; } .lgh-template-noir .lgh-role { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: #666; margin-top: 12px; } .lgh-template-noir .lgh-location { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.95rem; color: #666; margin-top: 8px; } .lgh-template-noir .lgh-bio { font-size: 1.05rem; font-weight: 400; line-height: 1.45; margin-top: 22px; max-width: 460px; } .lgh-template-noir .lgh-save-contact { background: #000; color: #FFF; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 0; } .lgh-template-noir .lgh-save-contact:hover { background: #333; } .lgh-template-noir .lgh-save-image { background: transparent; color: #000; border: 1px solid #000; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 0; } .lgh-template-noir .lgh-save-image:hover { background: #000; color: #FFF; } .lgh-template-noir .lgh-action-btn { background: transparent; color: #000; border: 1px solid #000; border-radius: 0; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.14em; } .lgh-template-noir .lgh-action-btn:hover { background: #000; color: #FFF; } .lgh-template-noir .lgh-social-btn { background: transparent; color: #000; border: 1px solid #000; border-radius: 0; font-family: 'Inter', sans-serif; font-weight: 500; } .lgh-template-noir .lgh-social-btn:hover { background: #000; color: #FFF; } /* ==================================================== TWILIGHT (editorial-variant — som Heges men i navy/brass/cream) ==================================================== */ .lgh-template-twilight { background: #F3ECDD; color: #1E1E2E; font-family: 'Inter', system-ui, sans-serif; } .lgh-template-twilight .lgh-card-vk { padding: 30px 0; } .lgh-template-twilight .lgh-photo { width: 100px; height: 100px; border: 2px solid #1E1E2E; background: #C9A876; border-radius: 2px; } .lgh-template-twilight .lgh-photo .initials { font-family: 'Source Serif 4', serif; font-weight: 600; font-size: 2.6rem; color: #F3ECDD; } .lgh-template-twilight .lgh-name { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 2.5rem; line-height: 1; letter-spacing: -0.01em; margin: 22px 0 4px; } .lgh-template-twilight .lgh-firstname { display: inline; } .lgh-template-twilight .lgh-surname { display: inline; font-style: italic; font-weight: 400; color: #C9A876; } .lgh-template-twilight .lgh-role { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: #1E1E2E; margin-top: 18px; padding-top: 14px; position: relative; } .lgh-template-twilight .lgh-role::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 2px; background: #C9A876; } .lgh-template-twilight .lgh-location { font-family: 'Source Serif 4', serif; font-style: italic; font-size: 1rem; color: #C9A876; margin-top: 8px; } .lgh-template-twilight .lgh-bio { font-family: 'Source Serif 4', serif; font-style: italic; font-size: 1.1rem; line-height: 1.45; margin-top: 22px; max-width: 460px; color: #1E1E2E; } .lgh-template-twilight .lgh-save-contact { background: #1E1E2E; color: #F3ECDD; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 3px 0 #C9A876; } .lgh-template-twilight .lgh-save-contact:hover { background: #2A2A3E; box-shadow: 0 4px 0 #C9A876; } .lgh-template-twilight .lgh-save-image { background: #C9A876; color: #1E1E2E; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 3px 0 #1E1E2E; } .lgh-template-twilight .lgh-save-image:hover { background: #D4B894; box-shadow: 0 4px 0 #1E1E2E; } .lgh-template-twilight .lgh-action-btn { background: #1E1E2E; color: #F3ECDD; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; } .lgh-template-twilight .lgh-action-btn:hover { background: #C9A876; color: #1E1E2E; } .lgh-template-twilight .lgh-social-btn { background: transparent; color: #1E1E2E; border: 1.5px solid rgba(30,30,46,0.2); border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.66rem; letter-spacing: 0.14em; } .lgh-template-twilight .lgh-social-btn:hover { background: #C9A876; color: #1E1E2E; border-color: #C9A876; } /* ==================================================== EXCHANGE FORM (felles struktur, template-spesifikk styling) ==================================================== */ .lgh-exchange { margin-top: 40px; padding: 28px 24px; } .lgh-exchange-kicker { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; } .lgh-exchange-title { font-size: 1.6rem; line-height: 1.15; margin-bottom: 6px; } .lgh-exchange-sub { font-size: 0.95rem; margin-bottom: 20px; opacity: 0.75; } .lgh-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lgh-form input, .lgh-form textarea { padding: 12px 14px; font-family: inherit; font-size: 0.92rem; width: 100%; box-sizing: border-box; border: 1px solid transparent; } .lgh-form textarea { grid-column: 1 / -1; min-height: 72px; resize: vertical; } .lgh-form .full { grid-column: 1 / -1; } .lgh-form button { grid-column: 1 / -1; padding: 13px; border: none; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .lgh-form-message { grid-column: 1 / -1; font-size: 0.78rem; letter-spacing: 0.06em; text-align: center; min-height: 1em; } /* Mono Minimal */ .lgh-template-mono .lgh-exchange { background: #181816; color: #FAFAF8; } .lgh-template-mono .lgh-exchange-kicker { color: #4A6FA5; } .lgh-template-mono .lgh-exchange-title { font-family: 'Archivo Black', sans-serif; font-weight: 900; } .lgh-template-mono .lgh-form input, .lgh-template-mono .lgh-form textarea { background: #FAFAF8; color: #181816; } .lgh-template-mono .lgh-form button { background: #4A6FA5; color: #FAFAF8; font-family: 'JetBrains Mono', monospace; } .lgh-template-mono .lgh-form button:hover { background: #355886; } /* Sage Calm */ .lgh-template-sage .lgh-exchange { background: #F8F4EB; color: #3A4030; border-radius: 12px; max-width: 540px; margin-left: auto; margin-right: auto; } .lgh-template-sage .lgh-exchange-kicker { color: #B07A5A; } .lgh-template-sage .lgh-exchange-title { font-family: 'Cormorant', serif; font-style: italic; font-size: 1.8rem; font-weight: 500; } .lgh-template-sage .lgh-exchange-sub { font-family: 'Cormorant', serif; font-style: italic; } .lgh-template-sage .lgh-form input, .lgh-template-sage .lgh-form textarea { background: #fff; color: #3A4030; border: 1px solid rgba(58,64,48,0.18); border-radius: 8px; } .lgh-template-sage .lgh-form button { background: #3A4030; color: #F8F4EB; border-radius: 999px; } .lgh-template-sage .lgh-form button:hover { background: #5C6450; } /* Blush */ .lgh-template-blush .lgh-exchange { background: #FAF3EC; color: #3C2A33; border-radius: 20px; border: 1px solid rgba(181,133,144,0.2); } .lgh-template-blush .lgh-exchange-kicker { color: #B07A5A; } .lgh-template-blush .lgh-exchange-title { font-family: 'Fraunces', serif; font-weight: 500; } .lgh-template-blush .lgh-form input, .lgh-template-blush .lgh-form textarea { background: #fff; border: 1px solid rgba(181,133,144,0.3); border-radius: 10px; } .lgh-template-blush .lgh-form button { background: #3C2A33; color: #FAF3EC; border-radius: 999px; } .lgh-template-blush .lgh-form button:hover { background: #5A4250; } /* Indie */ .lgh-template-indie .lgh-exchange { background: #1A2238; color: #E8EDF5; border-radius: 8px; border: 1px solid rgba(199,248,86,0.2); } .lgh-template-indie .lgh-exchange-kicker { color: #C7F856; font-family: 'JetBrains Mono', monospace; } .lgh-template-indie .lgh-exchange-title { font-family: 'Inter', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; } .lgh-template-indie .lgh-form input, .lgh-template-indie .lgh-form textarea { background: #0F1729; color: #E8EDF5; border: 1px solid rgba(232,237,245,0.1); border-radius: 4px; } .lgh-template-indie .lgh-form button { background: #C7F856; color: #0F1729; border-radius: 6px; font-family: 'JetBrains Mono', monospace; } .lgh-template-indie .lgh-form button:hover { background: #B8E840; } /* Byline */ .lgh-template-byline .lgh-exchange { background: #fff; color: #1A1A1A; border-top: 4px double #1A1A1A; padding: 32px 28px; } .lgh-template-byline .lgh-exchange-kicker { color: #A03028; } .lgh-template-byline .lgh-exchange-title { font-family: 'Source Serif 4', serif; font-weight: 600; font-size: 1.8rem; } .lgh-template-byline .lgh-exchange-sub { font-family: 'Source Serif 4', serif; } .lgh-template-byline .lgh-form input, .lgh-template-byline .lgh-form textarea { background: #F5F0E6; color: #1A1A1A; border: 1px solid #1A1A1A; border-radius: 0; } .lgh-template-byline .lgh-form button { background: #1A1A1A; color: #F5F0E6; border-radius: 0; } .lgh-template-byline .lgh-form button:hover { background: #A03028; } /* Bronze */ .lgh-template-bronze .lgh-exchange { background: rgba(255,253,248,0.6); color: #2D2018; border: 1px solid rgba(184,148,94,0.25); border-radius: 4px; } .lgh-template-bronze .lgh-exchange-kicker { color: #B8945E; } .lgh-template-bronze .lgh-exchange-title { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; } .lgh-template-bronze .lgh-form input, .lgh-template-bronze .lgh-form textarea { background: #fff; color: #2D2018; border: 1px solid rgba(184,148,94,0.3); border-radius: 0; } .lgh-template-bronze .lgh-form button { background: #2D2018; color: #F0EAE0; border-radius: 0; } .lgh-template-bronze .lgh-form button:hover { background: #B8945E; } /* Noir */ .lgh-template-noir .lgh-exchange { background: #F5F5F5; color: #000; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 32px 28px; } .lgh-template-noir .lgh-exchange-kicker { color: #666; } .lgh-template-noir .lgh-exchange-title { font-family: 'Inter', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; } .lgh-template-noir .lgh-form input, .lgh-template-noir .lgh-form textarea { background: #fff; color: #000; border: 1px solid #000; border-radius: 0; } .lgh-template-noir .lgh-form button { background: #000; color: #fff; border-radius: 0; } .lgh-template-noir .lgh-form button:hover { background: #333; } /* Twilight */ .lgh-template-twilight .lgh-exchange { background: #1E1E2E; color: #F3ECDD; border-radius: 4px; box-shadow: 0 4px 0 #C9A876; } .lgh-template-twilight .lgh-exchange-kicker { color: #C9A876; font-family: 'JetBrains Mono', monospace; } .lgh-template-twilight .lgh-exchange-title { font-family: 'Source Serif 4', serif; font-weight: 700; } .lgh-template-twilight .lgh-form input, .lgh-template-twilight .lgh-form textarea { background: #F3ECDD; color: #1E1E2E; border: 1px solid transparent; border-radius: 4px; } .lgh-template-twilight .lgh-form button { background: #C9A876; color: #1E1E2E; border-radius: 4px; font-family: 'JetBrains Mono', monospace; } .lgh-template-twilight .lgh-form button:hover { background: #D4B894; } @media (max-width: 480px) { .lgh-form { grid-template-columns: 1fr; } } /* ==================================================== Responsiv ==================================================== */ @media (max-width: 480px) { .lgh-template-mono .lgh-name { font-size: 1.8rem; } .lgh-template-mono .lgh-photo { width: 90px; height: 90px; } .lgh-template-sage .lgh-name { font-size: 2.3rem; } .lgh-template-blush .lgh-name { font-size: 2.1rem; } .lgh-template-blush .lgh-photo { width: 120px; height: 120px; } .lgh-template-indie .lgh-name { font-size: 1.9rem; } .lgh-template-byline .lgh-name { font-size: 2.1rem; } .lgh-template-bronze .lgh-name { font-size: 2.3rem; } .lgh-template-bronze .lgh-card-vk { padding: 24px 18px; } .lgh-template-noir .lgh-name { font-size: 2rem; } .lgh-template-twilight .lgh-name { font-size: 1.9rem; } } /* ==================================================== PULSE (#9 — sporty/energisk: idrett, trening, høy energi) Kritt-hvit flate, elektrisk oransje, Archivo Black, harde offset-skygger og tykke kanter. Foto firkantet. ==================================================== */ .lgh-template-pulse { background: #F4F4F0; color: #0D0D0D; font-family: 'Archivo', 'Inter', system-ui, sans-serif; } .lgh-template-pulse .lgh-card-vk { padding: 30px 0; } .lgh-template-pulse .lgh-photo { width: 130px; height: 130px; border-radius: 0; border: 3px solid #0D0D0D; box-shadow: 8px 8px 0 #FF4D1F; background: #0D0D0D; } .lgh-template-pulse .lgh-photo .initials { font-family: 'Archivo Black', sans-serif; font-size: 3rem; color: #FF4D1F; } .lgh-template-pulse .lgh-name { font-family: 'Archivo Black', sans-serif; font-size: 2.7rem; line-height: 0.95; letter-spacing: -0.02em; margin: 28px 0 6px; text-transform: uppercase; } .lgh-template-pulse .lgh-firstname { display: block; } .lgh-template-pulse .lgh-surname { display: block; -webkit-text-stroke: 2px #0D0D0D; -webkit-text-fill-color: transparent; } .lgh-template-pulse .lgh-role { display: inline-block; background: #FF4D1F; color: #F4F4F0; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 12px; margin-top: 14px; transform: skewX(-8deg); } .lgh-template-pulse .lgh-company { font-weight: 700; margin-top: 12px; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.04em; } .lgh-template-pulse .lgh-location { font-size: 0.92rem; color: #55554F; margin-top: 6px; font-weight: 600; } .lgh-template-pulse .lgh-bio { font-size: 1.05rem; font-weight: 500; line-height: 1.45; margin-top: 20px; max-width: 440px; } .lgh-template-pulse .lgh-save-contact { background: #0D0D0D; color: #F4F4F0; border: 3px solid #0D0D0D; border-radius: 0; box-shadow: 5px 5px 0 #FF4D1F; font-family: 'Archivo Black', sans-serif; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; } .lgh-template-pulse .lgh-save-contact:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 #FF4D1F; } .lgh-template-pulse .lgh-save-image { background: #F4F4F0; color: #0D0D0D; border: 3px solid #0D0D0D; border-radius: 0; box-shadow: 5px 5px 0 #0D0D0D; font-family: 'Archivo Black', sans-serif; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; } .lgh-template-pulse .lgh-save-image:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 #0D0D0D; } .lgh-template-pulse .lgh-action-btn { background: #F4F4F0; color: #0D0D0D; border: 2px solid #0D0D0D; border-radius: 0; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; } .lgh-template-pulse .lgh-action-btn:hover { background: #FF4D1F; color: #F4F4F0; border-color: #FF4D1F; } .lgh-template-pulse .lgh-social-btn { background: transparent; color: #0D0D0D; border: 2px solid #0D0D0D; border-radius: 0; font-weight: 700; } .lgh-template-pulse .lgh-social-btn:hover { background: #0D0D0D; color: #FF4D1F; } .lgh-template-pulse .lgh-exchange { background: #0D0D0D; color: #F4F4F0; border-radius: 0; box-shadow: 8px 8px 0 #FF4D1F; } .lgh-template-pulse .lgh-exchange-kicker { color: #FF4D1F; } .lgh-template-pulse .lgh-exchange-title { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 1.4rem; } @media (max-width: 480px) { .lgh-template-pulse .lgh-name { font-size: 2rem; } .lgh-template-pulse .lgh-photo { width: 110px; height: 110px; } }