/*
Theme Name: Kayode — Beyond Boundaries
Author: Kayode Olopade
Description: A responsive personal portfolio theme inspired by Kayode's professional flyer.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
*/
:root { --navy:#071e32; --green:#087a53; --lime:#c7e7a7; --paper:#f6f7f2; --muted:#52616a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:95px; }
body { margin:0; color:var(--navy); background:var(--paper); font-family:Arial, sans-serif; line-height:1.65; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button,a,input,select,textarea { outline-offset:5px; }
button { cursor:pointer; }
.skip { position:absolute; top:-80px; background:white; padding:12px; z-index:100; }
.skip:focus { top:0; }
header { display:flex; align-items:center; justify-content:space-between; padding:23px 6%; background:var(--paper); border-bottom:1px solid #dce1db; position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:13px; font-family:Georgia,serif; font-size:35px; line-height:1; letter-spacing:-2px; }
.brand>span { font:600 16px Arial,sans-serif; letter-spacing:0; border-left:1px solid #b7c1b9; padding-left:13px; }
.brand small { display:block; font-size:8px; letter-spacing:1.8px; margin-top:8px; }
nav { display:flex; gap:32px; align-items:center; font-size:13px; }
nav a:hover,.text-link:hover { color:var(--green); }
.nav-cta { border:1px solid var(--navy); padding:10px 19px; border-radius:3px; }
#menu { display:none; }
.hero { display:grid; grid-template-columns:1.15fr 1fr; min-height:690px; padding:55px 6% 45px; gap:40px; align-items:center; }
.eyebrow { font-size:10px; font-weight:bold; letter-spacing:2.4px; color:var(--green); margin:0 0 24px; }
h1 { font:clamp(45px,4.7vw,76px)/1.08 Georgia,serif; letter-spacing:-2.6px; margin:0 0 28px; font-weight:normal; }
em { font-weight:normal; color:var(--green); }
.intro { font-size:16px; max-width:475px; color:var(--muted); }
.actions { display:flex; gap:25px; align-items:center; margin:32px 0 42px; }
.button { border:0; background:var(--green); color:white; padding:15px 22px; border-radius:3px; display:inline-flex; justify-content:space-between; gap:28px; align-items:center; font-size:13px; }
.button:hover { background:var(--navy); }
.text-link { font-size:13px; border-bottom:1px solid #9eafa5; padding-bottom:5px; }
.hero-note { font-size:10px; color:var(--muted); display:flex; align-items:center; gap:9px; }
.hero-note span { width:6px; height:6px; border-radius:100%; background:var(--green); }
.portrait-wrap { height:570px; position:relative; border-radius:180px 180px 5px 5px; overflow:hidden; background:#dce5dd; }
.portrait { position:absolute; inset:0; background-image:url('assets/kayode-flyer.png'); background-size:212% auto; background-position:right 30.1%; }
.portrait-label { position:absolute; bottom:0; left:0; width:100%; padding:35px 30px 22px; color:white; background:linear-gradient(transparent,rgba(7,30,50,.97)); }
.portrait-label small { font-size:8px; letter-spacing:2px; }
.portrait-label strong { display:block; font:30px Georgia,serif; margin-top:8px; }
.orbit { position:absolute; top:25px; right:25px; border:1px solid white; border-radius:50%; width:45px; height:45px; text-align:center; color:white; font-size:26px; }
.discipline-bar { display:flex; justify-content:space-around; gap:20px; align-items:center; padding:24px 6%; background:var(--navy); color:white; font-size:10px; letter-spacing:1.5px; }
.discipline-bar b { color:var(--lime); font-size:20px; }
.section { padding:100px 8%; scroll-margin-top:10px; }
h2 { font:clamp(34px,3.7vw,54px)/1.18 Georgia,serif; letter-spacing:-1.3px; margin:0 0 28px; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:9%; }
p { color:var(--muted); font-size:14px; }
.large { font-size:20px; line-height:1.6; color:var(--navy); margin-top:0; }
.expertise { background:#edf0e9; }
.section-top { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:32px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:var(--paper); padding:30px; display:flex; flex-direction:column; min-height:365px; border:1px solid #d8dfd4; }
.card-top { display:flex; justify-content:space-between; color:var(--green); font-size:12px; margin-bottom:30px; }
h3 { font:27px/1.2 Georgia,serif; margin:0 0 20px; }
h4 { font-size:12px; margin:0; }
.card p { font-size:12px; }
.card a { margin-top:auto; padding-top:20px; font-size:11px; color:var(--green); }
.last-card { background:var(--green); color:white; }
.last-card p,.last-card a { color:white; }
.star { font-size:65px; line-height:1; margin-bottom:22px; color:var(--lime); }
.vision { background:var(--navy); color:white; }
.vision .eyebrow,.vision em { color:var(--lime); }
.vision h2 { max-width:800px; }
.vision-bottom { border-top:1px solid #405362; padding-top:40px; margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:8%; }
.vision-symbol { font:130px/1 Georgia,serif; color:var(--lime); }
.vision p { color:#bfcbd3; }
.vision .large { color:white; }
.connect { display:grid; grid-template-columns:1fr 1fr; gap:10%; }
.contact-note { font-size:11px; max-width:370px; }
form { display:flex; flex-direction:column; }
label { font-size:12px; margin:0 0 8px; }
input,select,textarea { width:100%; padding:13px; border:1px solid #becabe; background:transparent; border-radius:3px; color:var(--navy); margin-bottom:20px; }
textarea { resize:vertical; }
footer { border-top:1px solid #d4ddd3; padding:35px 6%; display:flex; justify-content:space-between; align-items:center; gap:20px; }
footer>a:last-child { font-size:12px; }
@media(min-width:1500px) { .hero,.section,header,footer { padding-left:max(6%,calc((100vw - 1300px)/2)); padding-right:max(6%,calc((100vw - 1300px)/2)); } }
@media(max-width:800px) { header { padding:20px 6%; } .brand>span { font-size:13px; } #menu { display:block; border:0; background:none; font-size:12px; } nav { display:none; position:absolute; top:80px; left:0; right:0; background:var(--paper); padding:24px; flex-direction:column; } nav.open { display:flex; } .hero { grid-template-columns:1fr; padding-top:45px; } h1 { font-size:49px; } .portrait-wrap { height:530px; max-width:440px; width:100%; margin:auto; } .discipline-bar { flex-wrap:wrap; font-size:9px; } .discipline-bar b { display:none; } .section { padding:65px 6%; } .about,.connect,.vision-bottom { grid-template-columns:1fr; gap:25px; } .cards { grid-template-columns:1fr 1fr; } .section-top { display:block; } .vision-symbol { display:none; } footer { flex-wrap:wrap; } }
@media(max-width:500px) { .cards { grid-template-columns:1fr; } .actions { gap:17px; } .button { padding:14px 17px; gap:18px; } .portrait-wrap { height:480px; } .portrait { background-size:215% auto; background-position:right 28%; } h1 { font-size:44px; letter-spacing:-1.9px; } .hero-note { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }