/* ============================================ hcarenest — shared styles ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Manrope:wght@400;500;600;700;800&family=Caveat:wght@500;600&display=swap'); :root{ --navy: #0e3b52; --navy-deep: #0a2c3c; --teal: #1f7f8b; --teal-light: #4fa8ac; --mint: #7cc9b8; --paper: #fbfdfd; --surface: #ffffff; --header-bg: rgba(251,253,253,0.92); --mist: #eef5f6; --mist-2: #e2eef0; --slate: #4d616a; --slate-soft: #7c8b92; --line: #dbe6e8; --ok: #1f7f8b; --err: #c1554a; --shadow-tint: rgba(14,59,82,.28); --serif: 'Fraunces', Georgia, serif; --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --script: 'Caveat', cursive; --max: 1160px; color-scheme: light; } /* Dark theme — toggled by data-theme="dark" on */ html[data-theme="dark"]{ --navy: #eaf3f4; --teal: #4fb3ba; --teal-light: #6ecfce; --mint: #8fd8c8; --paper: #0a1a22; --surface: #102834; --header-bg: rgba(10,26,34,0.86); --mist: #12303d; --mist-2: #163847; --slate: #b9cace; --slate-soft: #86a0a7; --line: rgba(255,255,255,0.12); --err: #e2867c; --shadow-tint: rgba(0,0,0,.45); color-scheme: dark; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; font-family: var(--sans); color: var(--navy); background: var(--paper); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background .2s ease, color .2s ease; } h1,h2,h3{ font-family: var(--serif); font-weight: 500; color: var(--navy); margin: 0 0 .5em; line-height: 1.12; letter-spacing: -0.01em; } p{ margin: 0 0 1em; color: var(--slate); } a{ color: inherit; text-decoration: none; } img{ max-width:100%; display:block; } button{ font-family: inherit; } .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; } .script-note{ font-family: var(--script); font-size: 1.6rem; color: var(--teal-light); line-height: 1.2; } /* ---------- focus & accessibility ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- header ---------- */ .site-header{ position: sticky; top:0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); transition: background .2s ease, border-color .2s ease; } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height: 76px; position: relative; } .brand{ display:flex; align-items:center; gap:10px; } .brand svg{ width:34px; height:34px; flex-shrink:0; } .brand-text{ display:flex; flex-direction:column; line-height:1.05; } .brand-name{ font-family: var(--serif); font-weight:600; font-size:1.28rem; color: var(--navy); } .brand-tag{ font-size: .66rem; letter-spacing:.03em; color: var(--slate-soft); } .header-right{ display:flex; align-items:center; gap:14px; } .main-nav{ display:flex; align-items:center; gap:30px; } .main-nav a.nav-link{ font-weight:600; font-size:.95rem; color: var(--navy); position:relative; padding: 4px 0; } .main-nav a.nav-link[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--teal); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 13px 26px; border-radius: 999px; border: none; cursor:pointer; font-weight: 700; font-size: .92rem; white-space:nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn-primary{ background: linear-gradient(120deg, var(--navy-deep) 0%, var(--teal) 100%); color: #fff; box-shadow: 0 10px 24px -10px rgba(10,44,60,.55); } .btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(14,59,82,.65); } .btn-block{ width:100%; } .nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; } .nav-toggle span, .nav-toggle::before, .nav-toggle::after{ content:none; } .nav-toggle svg{ width:26px; height:26px; color:var(--navy); } .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border: 1.5px solid var(--line); background: var(--surface); cursor:pointer; color: var(--navy); flex-shrink:0; transition: background .2s ease, border-color .2s ease, transform .15s ease; } .theme-toggle:hover{ transform: translateY(-1px); } .theme-toggle svg{ width:18px; height:18px; } .theme-toggle .icon-sun{ display:none; } html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; } html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; } /* ---------- hero ---------- */ .hero{ position: relative; overflow:hidden; background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 78%); } .hero .wrap{ display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap: 48px; padding-top: 74px; padding-bottom: 60px; } .hero-eyebrow-script{ display:block; margin-bottom: 6px; } .hero h1{ font-size: clamp(2.1rem, 3.4vw, 3rem); max-width: 12ch; } .hero h1 .accent{ color: var(--teal); } .hero-copy{ max-width: 46ch; font-size: 1.05rem; } .hero-actions{ margin-top: 8px; } .hero-art{ position:relative; } .hero-art svg{ width:100%; height:auto; } .hero-note{ position:absolute; top: 6%; right: 4%; font-family: var(--script); font-size: 1.7rem; color: var(--teal-light); transform: rotate(-4deg); } /* ---------- pillars ---------- */ .pillars{ background: var(--paper); padding: 10px 0 70px; } .pillar-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pillar{ background: var(--mist); border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px; } .pillar-icon{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background: var(--surface); color: var(--teal); margin-bottom:18px; box-shadow: 0 6px 16px -8px rgba(14,59,82,.25); } .pillar-icon svg{ width:24px; height:24px; } .pillar h3{ font-size: 1.12rem; margin-bottom:.35em; } .pillar p{ margin:0; font-size:.95rem; } /* ---------- about ---------- */ .about{ padding: 74px 0; background: var(--mist); } .about .wrap{ display:grid; grid-template-columns: 1fr .85fr; gap: 56px; align-items:center; } .about-copy .eyebrow{ color: var(--teal); font-weight:700; font-size:.82rem; letter-spacing:.02em; margin-bottom:10px; display:block; } .about-copy h2{ font-size: clamp(1.7rem, 2.6vw, 2.2rem); max-width: 14ch; } .about-copy p{ font-size: 1.02rem; max-width: 52ch; } .about-art{ position:relative; } .about-art svg{ width:100%; height:auto; } .value-cols{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 46px; } .value-col{ background: var(--surface); border-radius:16px; padding: 26px 24px; border: 1px solid var(--line); transition: background .2s ease, border-color .2s ease; } .value-col-icon{ color: var(--teal); margin-bottom: 14px; } .value-col-icon svg{ width:26px; height:26px; } .value-col h3{ font-size: 1.02rem; margin-bottom: .4em; } .value-col p{ font-size: .92rem; margin:0; } /* ---------- contact strip ---------- */ .contact-strip{ background: linear-gradient(120deg, var(--navy-deep), var(--navy) 60%, var(--teal)); color: #fff; padding: 46px 0; } .contact-strip .wrap{ display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap; } .contact-strip .script-note{ color: #cdeee8; } .contact-items{ display:flex; gap: 34px; flex-wrap:wrap; } .contact-item{ display:flex; align-items:center; gap:10px; font-weight:600; } .contact-item svg{ width:20px; height:20px; color: var(--mint); flex-shrink:0; } .contact-item a{ color:#fff; } /* ---------- footer ---------- */ .site-footer{ background: var(--navy-deep); color: #c7d6da; padding: 40px 0 26px; } .site-footer .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 20px; } .site-footer .brand-name{ color:#fff; } .site-footer .brand-tag{ color: #9db3ba; } .footer-links{ display:flex; gap: 26px; font-size:.88rem; } .footer-links a:hover{ color:#fff; } .footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); margin-top: 26px; padding-top: 20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size: .82rem; color: #8ea3aa; } /* ============================================ Submit CV page ============================================ */ .form-hero{ background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%); padding: 60px 0 20px; } .form-hero .wrap{ max-width: 720px; text-align:left; } .form-hero .script-note{ margin-bottom: 4px; } .form-hero h1{ font-size: clamp(1.9rem, 3vw, 2.5rem); } .form-hero p{ font-size: 1.02rem; max-width: 50ch; } .form-section{ padding: 20px 0 90px; } .form-card{ max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 40px; box-shadow: 0 30px 60px -34px var(--shadow-tint); transition: background .2s ease, border-color .2s ease; } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field{ margin-bottom: 22px; } .field label{ display:block; font-weight: 700; font-size: .88rem; color: var(--navy); margin-bottom: 8px; } .field label .req{ color: var(--err); margin-left:3px; } .field input[type="text"], .field input[type="email"], .field input[type="tel"]{ width:100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); font-family: inherit; font-size: .96rem; color: var(--navy); transition: border-color .15s ease, background .15s ease; } .field input:focus{ border-color: var(--teal); background: var(--surface); outline:none; } .field input.invalid{ border-color: var(--err); } .field-hint{ font-size: .8rem; color: var(--err); margin-top: 6px; min-height: 1em; } .phone-row{ display:flex; gap: 10px; } .phone-code{ display:flex; align-items:center; gap:6px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); padding: 0 10px; font-weight:700; font-size:.92rem; flex-shrink:0; min-height: 48px; } .phone-code select{ border:none; background:transparent; font: inherit; font-weight:700; color: var(--navy); padding: 13px 4px; -webkit-appearance:none; appearance:none; cursor:pointer; min-height: 44px; font-size: .92rem; max-width: 92px; } .phone-row{ flex-wrap: nowrap; } .phone-row input{ flex:1; min-width: 0; } .upload-box{ border: 1.5px dashed var(--line); border-radius: 14px; padding: 34px 20px; text-align:center; background: var(--paper); cursor:pointer; transition: border-color .15s ease, background .15s ease; } .upload-box:hover, .upload-box.drag{ border-color: var(--teal); background: var(--mist); } .upload-box input[type="file"]{ display:none; } .upload-icon{ color: var(--teal); margin-bottom: 10px; } .upload-icon svg{ width:26px; height:26px; } .upload-label{ font-weight:700; font-size: .94rem; color: var(--navy); } .upload-sub{ font-size:.8rem; color: var(--slate-soft); margin-top: 4px; } .upload-filename{ margin-top: 12px; font-size:.86rem; font-weight:700; color: var(--teal); word-break: break-all; } .form-note{ font-size: .82rem; color: var(--slate-soft); margin-top: -6px; } .submit-status{ margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--mist); color: var(--navy); font-weight:600; font-size: .92rem; display:none; } .submit-status.show{ display:block; } .submit-status.error{ background: rgba(193,85,74,.12); color: var(--err); } .submit-status.warn{ background: rgba(214,158,46,.14); color: #b5811f; } .btn-primary:disabled{ opacity:.7; cursor:progress; transform:none; } .btn-spinner{ width:16px; height:16px; border-radius:50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation: spin .7s linear infinite; display:none; } .btn-primary.loading .btn-spinner{ display:inline-block; } .btn-primary.loading .btn-label{ opacity:.85; } @keyframes spin{ to{ transform: rotate(360deg); } } /* ---------- responsive ---------- */ @media (max-width: 880px){ .hero .wrap{ grid-template-columns: 1fr; padding-top: 40px; } .hero-art{ order:-1; max-width: 340px; margin: 0 auto; } .pillar-grid{ grid-template-columns: 1fr; } .about .wrap{ grid-template-columns: 1fr; } .about-art{ order:-1; max-width: 320px; margin: 0 auto; } .value-cols{ grid-template-columns: 1fr; } .contact-strip .wrap{ flex-direction:column; align-items:flex-start; } .form-row{ grid-template-columns: 1fr; } .form-card{ padding: 28px 20px; } } @media (max-width: 720px){ .main-nav{ position:absolute; top:76px; left:0; right:0; background: var(--surface); flex-direction:column; align-items:stretch; gap:0; border-bottom:1px solid var(--line); box-shadow: 0 18px 30px -20px var(--shadow-tint); transform-origin: top; transform: scaleY(0); opacity:0; pointer-events:none; transition: transform .18s ease, opacity .18s ease; } .main-nav.open{ transform: scaleY(1); opacity:1; pointer-events:auto; } .main-nav a.nav-link{ padding: 16px 28px; border-bottom: 1px solid var(--line); } .main-nav .btn{ margin: 16px 28px; } .nav-toggle{ display:inline-flex; } } @media (max-width: 380px){ .phone-code select{ max-width: 74px; font-size: .84rem; } .form-card{ padding: 22px 16px; } } /* ============================================ Animation & dynamic interactions ============================================ */ @keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } } @keyframes floatYSlow{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } } @keyframes pulseSoft{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } } @keyframes shine{ 0%{ transform: translateX(-130%) skewX(-15deg); } 100%{ transform: translateX(230%) skewX(-15deg); } } @keyframes popIn{ 0%{ transform: scale(.6); opacity:0; } 100%{ transform: scale(1); opacity:1; } } /* scroll reveal */ .reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); will-change: opacity, transform; } .reveal.in-view{ opacity:1; transform:none; } .reveal-d1{ transition-delay: .08s; } .reveal-d2{ transition-delay: .18s; } .reveal-d3{ transition-delay: .28s; } .reveal-d4{ transition-delay: .38s; } /* ambient motion on illustrations */ .hero-art{ animation: floatY 6s ease-in-out infinite; } .hero-note{ animation: pulseSoft 3.2s ease-in-out infinite; } .about-art{ animation: floatYSlow 7s ease-in-out infinite; } /* header gains depth once the page scrolls */ .site-header{ transition: box-shadow .25s ease, background .2s ease, border-color .2s ease; } .site-header.scrolled{ box-shadow: 0 10px 26px -20px var(--shadow-tint); } /* logo playfulness */ .brand svg{ transition: transform .45s cubic-bezier(.34,1.56,.64,1); } .brand:hover svg{ transform: rotate(10deg) scale(1.08); } /* nav underline grows in on hover for non-active links */ .main-nav a.nav-link{ overflow:visible; } .main-nav a.nav-link:not([aria-current="page"])::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--teal); transform: scaleX(0); transform-origin:left; transition: transform .25s ease; } .main-nav a.nav-link:not([aria-current="page"]):hover::after{ transform: scaleX(1); } /* theme toggle spin */ .theme-toggle svg{ transition: transform .45s cubic-bezier(.34,1.56,.64,1); } .theme-toggle:hover svg{ transform: rotate(25deg); } .theme-toggle:active svg{ transform: rotate(90deg) scale(.9); } /* primary button shine sweep */ .btn-primary{ position:relative; overflow:hidden; } .btn-primary::after{ content:""; position:absolute; top:0; left:0; width:40%; height:100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-130%) skewX(-15deg); pointer-events:none; } .btn-primary:hover::after{ animation: shine 1s ease forwards; } /* pillar & value cards lift on hover */ .pillar, .value-col{ transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .pillar:hover, .value-col:hover{ transform: translateY(-6px); box-shadow: 0 20px 38px -22px var(--shadow-tint); border-color: var(--teal); } .pillar-icon{ transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .pillar:hover .pillar-icon{ transform: rotate(-8deg) scale(1.08); } .value-col-icon svg{ transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .value-col:hover .value-col-icon svg{ transform: scale(1.18) rotate(4deg); } /* upload boxes react to hover / drag */ .upload-icon svg{ transition: transform .3s ease; } .upload-box:hover .upload-icon svg{ transform: translateY(-4px); } .upload-box.drag .upload-icon svg{ animation: floatY 1s ease-in-out infinite; } .upload-filename:not(:empty){ animation: popIn .35s ease; } /* contact icons nudge on hover */ .contact-item{ transition: transform .2s ease; } .contact-item svg{ transition: transform .3s ease; } .contact-item:hover{ transform: translateY(-2px); } .contact-item:hover svg{ transform: translateY(-3px) scale(1.08); } /* field focus glow */ .field input:focus{ box-shadow: 0 0 0 4px rgba(31,127,139,.14); } /* back-to-top button */ .back-to-top{ position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background: linear-gradient(120deg, var(--navy-deep), var(--teal)); color:#fff; box-shadow: 0 14px 30px -12px var(--shadow-tint); opacity:0; transform: translateY(14px) scale(.85); pointer-events:none; transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); } .back-to-top.show{ opacity:1; transform:none; pointer-events:auto; } .back-to-top:hover{ transform: translateY(-3px) scale(1.05); } .back-to-top svg{ width:20px; height:20px; } @media (max-width: 720px){ .back-to-top{ right:14px; bottom:14px; width:42px; height:42px; } } /* respect reduced motion for the new dynamic bits too (belt & suspenders alongside the global rule already defined above) */ @media (prefers-reduced-motion: reduce){ .hero-art, .hero-note, .about-art, .upload-box.drag .upload-icon svg{ animation: none; } .reveal{ opacity:1; transform:none; transition:none; } .btn-primary::after{ display:none; } }