810 lines
31 KiB
HTML
810 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The OC Guy — ODOO Community Advocate</title>
|
|
<meta name="description" content="The OC Guy is your ODOO Community advocate. Small companies and startups — run your business with battle-proven ODOO ERP and bolt AI on top.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* ===== RESET ===== */
|
|
*,::before,::after{box-sizing:border-box}
|
|
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
|
|
body{margin:0;min-width:320px;background:#0a0a0f;color:#e8e8f0;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:clip}
|
|
img{display:block;max-width:100%;height:auto}
|
|
a{color:inherit;text-decoration:none}
|
|
button,input{font:inherit;color:inherit}
|
|
:focus-visible{outline:2.5px solid #00e6ff;outline-offset:4px;border-radius:2px}
|
|
::selection{background:#9c27b055;color:#fff}
|
|
.skip-link{position:fixed;top:.75rem;left:.75rem;z-index:100;padding:.6rem 1rem;background:#0a0a0f;color:#e8e8f0;border:1px solid #9c27b066;border-radius:6px;font-size:.8rem;transform:translateY(-180%);transition:transform 300ms cubic-bezier(.16,1,.3,1)}
|
|
.skip-link:focus{transform:translateY(0)}
|
|
|
|
/* ===== CUSTOM PROPS ===== */
|
|
:root{
|
|
--bg:#0a0a0f;
|
|
--bg-soft:#12101e;
|
|
--bg-card:#16142a;
|
|
--bg-elevated:#1c1a32;
|
|
--purple:#9c27b0;
|
|
--purple-glow:rgba(156,39,176,.35);
|
|
--cyan:#00e6ff;
|
|
--cyan-glow:rgba(0,230,255,.25);
|
|
--amber:#d4a04a;
|
|
--amber-soft:#b8913e;
|
|
--gold:oklch(68% .145 74);
|
|
--gold-bright:oklch(76% .165 80);
|
|
--text:#e8e8f0;
|
|
--text-soft:#9898b0;
|
|
--text-muted:#6a6a82;
|
|
--line:rgba(156,39,176,.15);
|
|
--font-display:Chakra Petch,Inter,system-ui,sans-serif;
|
|
--font-body:Inter,system-ui,-apple-system,sans-serif;
|
|
--header-h:68px;
|
|
--ease:cubic-bezier(.16,1,.3,1);
|
|
--ease-out:cubic-bezier(.22,1,.36,1);
|
|
--shadow-card:0 8px 32px rgba(0,0,0,.4);
|
|
--shadow-glow:0 0 60px rgba(156,39,176,.15);
|
|
}
|
|
|
|
/* ===== HEADER ===== */
|
|
.site-header{
|
|
position:fixed;top:0;left:0;right:0;z-index:50;
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
min-height:var(--header-h);
|
|
padding:0 clamp(1rem,3vw,2.5rem);
|
|
background:linear-gradient(180deg,#0a0a0fee,#0a0a0fcc,transparent);
|
|
backdrop-filter:blur(12px);
|
|
border-bottom:1px solid transparent;
|
|
transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
|
|
}
|
|
.site-header.is-scrolled{
|
|
border-bottom:1px solid var(--line);
|
|
box-shadow:0 4px 40px rgba(0,0,0,.5);
|
|
}
|
|
.brand{
|
|
display:flex;align-items:center;gap:.7rem;
|
|
font-family:var(--font-display);font-size:1.15rem;font-weight:600;
|
|
letter-spacing:.04em;color:var(--text);
|
|
}
|
|
.brand-mark{
|
|
width:2.1rem;height:2.1rem;border-radius:50%;
|
|
background:conic-gradient(from 0deg,#9c27b0,#00e6ff,#9c27b0);
|
|
box-shadow:0 0 20px var(--purple-glow);
|
|
flex-shrink:0;
|
|
}
|
|
.focal-nav{
|
|
display:flex;align-items:center;gap:clamp(.3rem,1.2vw,1.5rem);
|
|
list-style:none;margin:0;padding:0;
|
|
}
|
|
.focal-nav a{
|
|
position:relative;
|
|
display:inline-flex;align-items:center;min-height:44px;
|
|
padding:.3rem .6rem;
|
|
font-family:var(--font-display);font-size:.72rem;font-weight:500;
|
|
text-transform:uppercase;letter-spacing:.08em;
|
|
color:var(--text-soft);
|
|
transition:color .2s var(--ease),transform .25s var(--ease);
|
|
}
|
|
.focal-nav a::after{
|
|
content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
|
|
width:4px;height:4px;border-radius:50%;
|
|
background:var(--cyan);opacity:0;
|
|
transition:opacity .2s var(--ease),transform .2s var(--ease);
|
|
}
|
|
.focal-nav a:hover,.focal-nav a[aria-current]{
|
|
color:var(--text);
|
|
}
|
|
.focal-nav a:hover::after,.focal-nav a[aria-current]::after{
|
|
opacity:1;
|
|
}
|
|
.nav-toggle{display:none}
|
|
|
|
/* ===== SECTIONS ===== */
|
|
section[id]{scroll-margin-top:var(--header-h)}
|
|
.section-pad{padding:clamp(4rem,8vw,7rem) clamp(1.2rem,4vw,3rem)}
|
|
.section-label{
|
|
font-family:var(--font-display);font-size:.7rem;font-weight:500;
|
|
text-transform:uppercase;letter-spacing:.15em;
|
|
color:var(--cyan);margin:0 0 .5rem;
|
|
}
|
|
.section-title{
|
|
font-family:var(--font-display);font-size:clamp(1.6rem,3.8vw,3rem);
|
|
font-weight:300;line-height:1.1;margin:0 0 1rem;
|
|
color:var(--text);
|
|
}
|
|
.section-title strong{font-weight:600;color:var(--purple)}
|
|
.section-sub{
|
|
max-width:36rem;color:var(--text-soft);font-size:clamp(.95rem,1.15vw,1.1rem);
|
|
margin:0 0 2.5rem;line-height:1.55;
|
|
}
|
|
|
|
/* ===== HERO ===== */
|
|
.hero{
|
|
position:relative;min-height:100svh;display:grid;align-items:center;
|
|
padding:var(--header-h) clamp(1.2rem,4vw,3rem) 0;
|
|
overflow:hidden;
|
|
}
|
|
.hero::before{
|
|
content:'';position:absolute;inset:0;z-index:0;
|
|
background:
|
|
radial-gradient(ellipse 60% 50% at 30% 60%,rgba(156,39,176,.2),transparent),
|
|
radial-gradient(ellipse 50% 40% at 70% 30%,rgba(0,230,255,.08),transparent),
|
|
radial-gradient(ellipse 80% 50% at 50% 80%,rgba(212,160,74,.06),transparent);
|
|
}
|
|
.hero-grid{
|
|
position:relative;z-index:1;
|
|
display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;
|
|
width:100%;max-width:1200px;margin:0 auto;
|
|
}
|
|
.hero-copy{max-width:38rem}
|
|
.hero-eyebrow{
|
|
font-family:var(--font-display);font-size:.72rem;font-weight:500;
|
|
text-transform:uppercase;letter-spacing:.2em;
|
|
color:var(--cyan);margin:0 0 .75rem;
|
|
}
|
|
.hero h1{
|
|
font-family:var(--font-display);font-size:clamp(2.8rem,6vw,5.2rem);
|
|
font-weight:300;line-height:.95;margin:0 0 .6rem;
|
|
text-transform:uppercase;
|
|
}
|
|
.hero h1 .line{display:block}
|
|
.hero h1 .highlight{font-weight:700;background:linear-gradient(135deg,var(--purple),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
.hero-tagline{
|
|
font-size:clamp(1.1rem,1.8vw,1.6rem);
|
|
color:var(--text-soft);margin:0 0 .4rem;
|
|
font-weight:300;line-height:1.3;
|
|
}
|
|
.hero-summary{
|
|
max-width:32rem;color:var(--text-muted);font-size:clamp(.88rem,1.05vw,1rem);
|
|
margin:0 0 2rem;line-height:1.55;
|
|
}
|
|
.hero-actions{
|
|
display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;
|
|
}
|
|
.btn{
|
|
display:inline-flex;align-items:center;gap:.5rem;min-height:48px;
|
|
padding:.75rem 1.6rem;border-radius:8px;
|
|
font-family:var(--font-display);font-size:.82rem;font-weight:600;
|
|
text-transform:uppercase;letter-spacing:.06em;
|
|
cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
|
|
}
|
|
.btn-primary{
|
|
background:linear-gradient(135deg,var(--purple),#7b1fa2);
|
|
color:#fff;border:none;
|
|
box-shadow:0 4px 30px var(--purple-glow);
|
|
}
|
|
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 40px var(--purple-glow)}
|
|
.btn-ghost{
|
|
background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.15);
|
|
}
|
|
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);transform:translateY(-2px)}
|
|
.hero-visual{
|
|
position:relative;display:grid;place-items:center;
|
|
min-height:clamp(16rem,30vw,28rem);
|
|
}
|
|
.hero-glow{
|
|
position:absolute;width:clamp(18rem,35vw,32rem);aspect-ratio:1;
|
|
border-radius:50%;
|
|
background:radial-gradient(circle,rgba(156,39,176,.2),rgba(0,230,255,.08),transparent 65%);
|
|
animation:glowPulse 4s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes glowPulse{
|
|
0%{transform:scale(.85);opacity:.6}
|
|
100%{transform:scale(1.15);opacity:1}
|
|
}
|
|
.hero-grid-lines{
|
|
position:relative;width:100%;max-width:28rem;aspect-ratio:1;
|
|
background:
|
|
linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0 / 12% 100%,
|
|
linear-gradient(0deg,var(--line) 1px,transparent 1px) 0 0 / 100% 12%;
|
|
border:1px solid var(--line);border-radius:4px;
|
|
overflow:hidden;
|
|
}
|
|
.hero-grid-lines::before{
|
|
content:'';position:absolute;
|
|
top:45%;left:40%;width:20%;height:20%;
|
|
background:radial-gradient(circle,rgba(0,230,255,.3),transparent);
|
|
animation:dotDrift 6s ease-in-out infinite alternate;
|
|
}
|
|
.hero-cyber-ring{
|
|
position:absolute;width:60%;aspect-ratio:1;top:20%;left:20%;
|
|
border:1px solid rgba(156,39,176,.25);border-radius:50%;
|
|
animation:ringSpin 12s linear infinite;
|
|
}
|
|
.hero-cyber-ring:nth-child(2){width:80%;top:10%;left:10%;border-color:rgba(0,230,255,.12);animation-direction:reverse;animation-duration:18s}
|
|
@keyframes ringSpin{to{transform:rotate(360deg)}}
|
|
@keyframes dotDrift{
|
|
0%{transform:translate(0,0) scale(1);opacity:.4}
|
|
100%{transform:translate(30%,-25%) scale(1.5);opacity:.8}
|
|
}
|
|
.hero-scroll-hint{
|
|
position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;
|
|
display:flex;flex-direction:column;align-items:center;gap:.4rem;
|
|
color:var(--text-muted);font-size:.68rem;font-family:var(--font-display);
|
|
letter-spacing:.1em;text-transform:uppercase;animation:scrollBob 2s ease-in-out infinite;
|
|
}
|
|
.hero-scroll-hint span{display:block;width:1px;height:1.8rem;background:var(--text-muted)}
|
|
@keyframes scrollBob{
|
|
0%,100%{transform:translateX(-50%) translateY(0)}
|
|
50%{transform:translateX(-50%) translateY(6px)}
|
|
}
|
|
|
|
/* ===== MISSION ===== */
|
|
.mission{
|
|
background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
|
|
}
|
|
.mission-grid{
|
|
display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
|
|
max-width:1200px;margin:0 auto;align-items:center;
|
|
}
|
|
.mission-visual{
|
|
position:relative;display:grid;place-items:center;min-height:18rem;
|
|
}
|
|
.mission-stack{
|
|
display:grid;gap:1rem;width:100%;
|
|
}
|
|
.mission-layer{
|
|
padding:1.2rem 1.5rem;border-radius:10px;
|
|
background:var(--bg-card);border:1px solid var(--line);
|
|
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
|
|
}
|
|
.mission-layer:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
|
|
.mission-layer h3{
|
|
font-family:var(--font-display);font-size:1rem;font-weight:600;
|
|
margin:0 0 .2rem;color:var(--text);
|
|
}
|
|
.mission-layer p{
|
|
margin:0;font-size:.88rem;color:var(--text-soft);line-height:1.4;
|
|
}
|
|
.mission-layer .layer-badge{
|
|
display:inline-block;padding:.15rem .6rem;border-radius:4px;
|
|
font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
|
|
margin-bottom:.35rem;
|
|
}
|
|
.badge-odoo{background:rgba(156,39,176,.2);color:var(--purple);border:1px solid rgba(156,39,176,.3)}
|
|
.badge-ai{background:rgba(0,230,255,.1);color:var(--cyan);border:1px solid rgba(0,230,255,.2)}
|
|
.badge-stack{background:rgba(212,160,74,.12);color:var(--amber);border:1px solid rgba(212,160,74,.2)}
|
|
|
|
/* ===== CONTENT / BLOG ===== */
|
|
.content-header{
|
|
display:flex;justify-content:space-between;align-items:flex-end;
|
|
flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem;
|
|
}
|
|
.content-filter{
|
|
display:flex;gap:.4rem;flex-wrap:wrap;
|
|
}
|
|
.filter-btn{
|
|
padding:.4rem 1rem;border-radius:20px;border:1px solid var(--line);
|
|
background:transparent;color:var(--text-soft);font-size:.8rem;
|
|
cursor:pointer;transition:all .2s var(--ease);font-family:var(--font-body);
|
|
}
|
|
.filter-btn:hover,.filter-btn.is-active{
|
|
background:var(--purple);border-color:var(--purple);color:#fff;
|
|
}
|
|
.card-grid{
|
|
display:grid;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr));
|
|
gap:clamp(1rem,2vw,1.5rem);max-width:1200px;margin:0 auto;
|
|
}
|
|
.card{
|
|
background:var(--bg-card);border:1px solid var(--line);border-radius:12px;
|
|
overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
|
|
}
|
|
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
|
|
.card-thumb{
|
|
aspect-ratio:16/9;background:var(--bg-elevated);
|
|
display:grid;place-items:center;overflow:hidden;
|
|
position:relative;
|
|
}
|
|
.card-thumb .placeholder-icon{
|
|
font-size:2rem;opacity:.15;color:var(--purple);
|
|
}
|
|
.card-thumb .card-cat{
|
|
position:absolute;top:.6rem;left:.6rem;
|
|
padding:.15rem .6rem;border-radius:4px;font-size:.62rem;font-weight:600;
|
|
text-transform:uppercase;letter-spacing:.05em;
|
|
}
|
|
.cat-tutorial{background:rgba(0,230,255,.15);color:var(--cyan)}
|
|
.cat-tips{background:rgba(156,39,176,.15);color:var(--purple)}
|
|
.cat-news{background:rgba(212,160,74,.15);color:var(--amber)}
|
|
.card-body{padding:1.2rem 1.4rem 1.4rem}
|
|
.card-date{color:var(--text-muted);font-size:.72rem;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em}
|
|
.card-body h3{
|
|
font-family:var(--font-display);font-size:1.1rem;font-weight:600;
|
|
margin:.3rem 0 .4rem;color:var(--text);line-height:1.25;
|
|
}
|
|
.card-body p{
|
|
font-size:.86rem;color:var(--text-soft);line-height:1.45;margin:0;
|
|
}
|
|
.card-empty{
|
|
grid-column:1/-1;text-align:center;padding:3rem;
|
|
color:var(--text-muted);font-size:.95rem;
|
|
background:var(--bg-card);border:1px dashed var(--line);border-radius:12px;
|
|
}
|
|
|
|
/* ===== ABOUT ===== */
|
|
.about{
|
|
background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
|
|
}
|
|
.about-grid{
|
|
display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,4vw,3.5rem);
|
|
max-width:1200px;margin:0 auto;align-items:start;
|
|
}
|
|
.about-avatar{
|
|
width:clamp(8rem,14vw,12rem);aspect-ratio:1;border-radius:50%;
|
|
background:conic-gradient(from 180deg,var(--purple),var(--cyan),var(--purple));
|
|
display:grid;place-items:center;position:relative;
|
|
box-shadow:0 0 60px var(--purple-glow);
|
|
flex-shrink:0;
|
|
}
|
|
.about-avatar-inner{
|
|
width:calc(100% - 6px);height:calc(100% - 6px);border-radius:50%;
|
|
background:var(--bg-soft);display:grid;place-items:center;
|
|
font-family:var(--font-display);font-weight:700;
|
|
font-size:clamp(1.8rem,3vw,2.5rem);color:var(--cyan);
|
|
}
|
|
.about-text h2{margin-top:0}
|
|
.about-text .section-sub{margin-bottom:1.5rem}
|
|
.about-detail{
|
|
display:grid;gap:.8rem;
|
|
}
|
|
.about-detail dt{
|
|
font-family:var(--font-display);font-size:.7rem;font-weight:600;
|
|
text-transform:uppercase;letter-spacing:.1em;color:var(--cyan);
|
|
margin-bottom:.15rem;
|
|
}
|
|
.about-detail dd{margin:0;color:var(--text-soft);font-size:.92rem;line-height:1.45}
|
|
|
|
/* ===== CTA ===== */
|
|
.cta{
|
|
text-align:center;position:relative;overflow:hidden;
|
|
}
|
|
.cta::before{
|
|
content:'';position:absolute;inset:0;z-index:0;
|
|
background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(156,39,176,.12),transparent);
|
|
}
|
|
.cta-inner{
|
|
position:relative;z-index:1;max-width:40rem;margin:0 auto;
|
|
}
|
|
.cta-inner .section-title{max-width:30rem;margin-left:auto;margin-right:auto}
|
|
.cta-inner .section-sub{margin-left:auto;margin-right:auto}
|
|
.cta-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.5rem}
|
|
.cta-email{
|
|
display:inline-flex;align-items:center;gap:.5rem;
|
|
padding:.75rem 1.6rem;border-radius:8px;
|
|
background:rgba(255,255,255,.04);border:1px solid var(--line);
|
|
color:var(--text);font-family:var(--font-display);font-size:.85rem;
|
|
transition:all .25s var(--ease);
|
|
}
|
|
.cta-email:hover{background:rgba(255,255,255,.08);border-color:var(--purple);transform:translateY(-2px)}
|
|
|
|
/* ===== FOOTER ===== */
|
|
.site-footer{
|
|
border-top:1px solid var(--line);
|
|
padding:2rem clamp(1.2rem,4vw,3rem);
|
|
}
|
|
.footer-grid{
|
|
max-width:1200px;margin:0 auto;
|
|
display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
|
|
}
|
|
.footer-brand{
|
|
display:flex;align-items:center;gap:.6rem;
|
|
font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--text);
|
|
}
|
|
.footer-brand .brand-mark{width:1.6rem;height:1.6rem}
|
|
.footer-copy{color:var(--text-muted);font-size:.78rem;margin:0}
|
|
.footer-social{display:flex;gap:.8rem}
|
|
.footer-social a{
|
|
display:grid;place-items:center;width:2.5rem;height:2.5rem;
|
|
border:1px solid var(--line);border-radius:50%;
|
|
color:var(--text-soft);font-size:.75rem;font-weight:600;font-family:var(--font-display);
|
|
transition:all .2s var(--ease);
|
|
}
|
|
.footer-social a:hover{color:var(--cyan);border-color:var(--cyan);transform:translateY(-3px)}
|
|
|
|
/* ===== SCROLL REVEAL ===== */
|
|
[data-reveal]{
|
|
opacity:0;filter:blur(4px);
|
|
transform:translateY(2rem);
|
|
transition:opacity .7s var(--ease-out),filter .7s var(--ease-out),transform .9s var(--ease-out);
|
|
}
|
|
[data-reveal].is-visible{
|
|
opacity:1;filter:blur(0);transform:translateY(0);
|
|
}
|
|
[data-reveal][data-reveal-delay="100"]{transition-delay:.1s}
|
|
[data-reveal][data-reveal-delay="200"]{transition-delay:.2s}
|
|
[data-reveal][data-reveal-delay="300"]{transition-delay:.3s}
|
|
[data-reveal][data-reveal-delay="400"]{transition-delay:.4s}
|
|
[data-reveal][data-reveal-delay="500"]{transition-delay:.5s}
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
@media(max-width:900px){
|
|
.hero-grid{grid-template-columns:1fr;gap:1rem}
|
|
.hero-visual{min-height:14rem;order:-1}
|
|
.hero-grid-lines{max-width:18rem}
|
|
.mission-grid{grid-template-columns:1fr}
|
|
.mission-visual{order:-1;min-height:12rem}
|
|
.about-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
|
|
.about-avatar{margin-bottom:1rem}
|
|
.focal-nav{gap:.2rem}
|
|
.focal-nav a{padding:.3rem .4rem;font-size:.65rem}
|
|
}
|
|
@media(max-width:640px){
|
|
.site-header{padding:0 .8rem}
|
|
.brand{font-size:1rem}
|
|
.brand-mark{width:1.7rem;height:1.7rem}
|
|
.focal-nav{position:fixed;top:var(--header-h);left:0;right:0;
|
|
flex-direction:column;gap:0;
|
|
background:#0a0a0fee;backdrop-filter:blur(16px);
|
|
border-bottom:1px solid var(--line);
|
|
padding:.5rem 0;transform:translateY(-120%);opacity:0;
|
|
transition:transform .3s var(--ease),opacity .2s var(--ease);
|
|
pointer-events:none;
|
|
}
|
|
.focal-nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
|
|
.focal-nav a{width:100%;padding:.7rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.03)}
|
|
.nav-toggle{
|
|
display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
|
|
padding:0;border:none;background:transparent;color:var(--text);
|
|
font-family:var(--font-display);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
|
|
cursor:pointer;
|
|
}
|
|
.nav-toggle i,.nav-toggle i::before,.nav-toggle i::after{
|
|
display:block;width:1.4rem;height:1.5px;background:currentColor;
|
|
position:relative;transition:transform .25s var(--ease),opacity .2s var(--ease);
|
|
}
|
|
.nav-toggle i::before,.nav-toggle i::after{
|
|
content:'';position:absolute;left:0;
|
|
}
|
|
.nav-toggle i::before{top:-.4rem}
|
|
.nav-toggle i::after{top:.4rem}
|
|
.nav-toggle[aria-expanded=true] i{background:transparent}
|
|
.nav-toggle[aria-expanded=true] i::before{transform:translateY(.4rem) rotate(45deg)}
|
|
.nav-toggle[aria-expanded=true] i::after{transform:translateY(-.4rem) rotate(-45deg)}
|
|
.hero h1{font-size:clamp(2rem,10vw,3.2rem)}
|
|
.hero-actions{flex-direction:column;align-items:stretch}
|
|
.hero-actions .btn{justify-content:center}
|
|
.hero-visual{min-height:10rem}
|
|
.card-grid{grid-template-columns:1fr}
|
|
.footer-grid{grid-template-columns:1fr;text-align:center;justify-items:center}
|
|
}
|
|
@media(prefers-reduced-motion:reduce){
|
|
*,::before,::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
|
|
[data-reveal]{opacity:1;filter:none;transform:none}
|
|
}
|
|
|
|
/* ===== SCROLLBAR ===== */
|
|
::-webkit-scrollbar{width:8px}
|
|
::-webkit-scrollbar-track{background:#0a0a0f}
|
|
::-webkit-scrollbar-thumb{background:rgba(156,39,176,.3);border-radius:4px}
|
|
::-webkit-scrollbar-thumb:hover{background:rgba(156,39,176,.5)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<a class="skip-link" href="#mission">Skip to content</a>
|
|
|
|
<!-- ===== HEADER ===== -->
|
|
<header class="site-header" id="header" role="banner">
|
|
<a class="brand" href="#" aria-label="The OC Guy home">
|
|
<span class="brand-mark" aria-hidden="true"></span>
|
|
<span>OC GUY</span>
|
|
</a>
|
|
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation" aria-expanded="false">
|
|
<i></i>
|
|
<span>Menu</span>
|
|
</button>
|
|
<nav aria-label="Main navigation">
|
|
<ul class="focal-nav" id="focalNav" role="list">
|
|
<li><a href="#" aria-current="page">Home</a></li>
|
|
<li><a href="#mission">Mission</a></li>
|
|
<li><a href="#content">Blog</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#cta">Contact</a></li>
|
|
<li><a href="#videos">Videos</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- ===== HERO ===== -->
|
|
<section class="hero" id="home">
|
|
<div class="hero-grid">
|
|
<div class="hero-copy" data-reveal>
|
|
<p class="hero-eyebrow">ODOO Community Advocate</p>
|
|
<h1>
|
|
<span class="line">THE</span>
|
|
<span class="line highlight">OC GUY</span>
|
|
<span class="line">IS HERE</span>
|
|
</h1>
|
|
<p class="hero-tagline">Run your business with the best kept secret in ERP.</p>
|
|
<p class="hero-summary">
|
|
ODOO Community is battle-proven, affordable, and the perfect foundation for bolting AI on top. I'm here to show you how.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a href="#content" class="btn btn-primary">Watch Videos</a>
|
|
<a href="#mission" class="btn btn-ghost">Learn More</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-visual" data-reveal data-reveal-delay="200">
|
|
<div class="hero-glow"></div>
|
|
<div class="hero-grid-lines">
|
|
<div class="hero-cyber-ring"></div>
|
|
<div class="hero-cyber-ring"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-scroll-hint" aria-hidden="true">
|
|
<span></span>
|
|
Scroll
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== MISSION ===== -->
|
|
<section class="section-pad mission" id="mission">
|
|
<div class="mission-grid">
|
|
<div class="mission-copy" data-reveal>
|
|
<p class="section-label">The Mission</p>
|
|
<h2 class="section-title">
|
|
ODOO Community + AI.<br>
|
|
<strong>The smart stack</strong> for modern business.
|
|
</h2>
|
|
<p class="section-sub">
|
|
Why pay for expensive enterprise licenses when ODOO Community gives you a full-featured, production-hardened ERP — and leaves you the freedom to bolt AI exactly where it matters?
|
|
</p>
|
|
<div class="mission-stack">
|
|
<div class="mission-layer">
|
|
<span class="layer-badge badge-odoo">ODOO Community</span>
|
|
<h3>Battle-proven ERP</h3>
|
|
<p>CRM, sales, inventory, accounting, manufacturing — a complete business OS used by thousands, totally free.</p>
|
|
</div>
|
|
<div class="mission-layer">
|
|
<span class="layer-badge badge-ai">AI Layer</span>
|
|
<h3>Intelligence on top</h3>
|
|
<p>Chatbots, predictive analytics, document intelligence, automation agents. The AI era needs a solid data foundation — ODOO delivers it.</p>
|
|
</div>
|
|
<div class="mission-layer">
|
|
<span class="layer-badge badge-stack">Your Business</span>
|
|
<h3>Built for startups & SMEs</h3>
|
|
<p>You don't need Silicon Valley budgets. You need the right base. ODOO Community + AI is the cheapest, smartest path forward.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mission-visual" data-reveal data-reveal-delay="200">
|
|
<div class="hero-glow" style="width:clamp(14rem,28vw,24rem);opacity:.5"></div>
|
|
<div style="position:relative;z-index:1;text-align:center;padding:1.5rem">
|
|
<div style="font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.8rem);font-weight:700;color:var(--purple);line-height:1.1">
|
|
ODOO<br>
|
|
<span style="color:var(--cyan)">+ AI</span>
|
|
</div>
|
|
<div style="margin-top:.5rem;color:var(--text-muted);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase">
|
|
The New Standard
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== BLOG / CONTENT ===== -->
|
|
<section class="section-pad" id="content">
|
|
<div class="content-header" style="max-width:1200px;margin:0 auto 2.5rem" data-reveal>
|
|
<div>
|
|
<p class="section-label">Content</p>
|
|
<h2 class="section-title">News, <strong>Tips & Tricks</strong>, Tutorials</h2>
|
|
</div>
|
|
<div class="content-filter" role="tablist" aria-label="Filter content by category">
|
|
<button class="filter-btn is-active" role="tab" aria-selected="true" data-filter="all">All</button>
|
|
<button class="filter-btn" role="tab" aria-selected="false" data-filter="tutorial">Tutorials</button>
|
|
<button class="filter-btn" role="tab" aria-selected="false" data-filter="tips">Tips & Tricks</button>
|
|
<button class="filter-btn" role="tab" aria-selected="false" data-filter="news">News</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-grid" id="videos">
|
|
<!-- Card 1 -->
|
|
<article class="card" data-reveal data-reveal-delay="100" data-category="tutorial">
|
|
<div class="card-thumb">
|
|
<span class="card-cat cat-tutorial">Tutorial</span>
|
|
<span class="placeholder-icon">▶</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-date">Coming Soon</p>
|
|
<h3>Getting Started with ODOO Community</h3>
|
|
<p>Your first walkthrough — install, configure, and run your first module on ODOO Community Edition.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 2 -->
|
|
<article class="card" data-reveal data-reveal-delay="200" data-category="tips">
|
|
<div class="card-thumb">
|
|
<span class="card-cat cat-tips">Tips & Tricks</span>
|
|
<span class="placeholder-icon">💡</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-date">Coming Soon</p>
|
|
<h3>5 ODOO Features You Didn't Know Existed</h3>
|
|
<p>Hidden gems in ODOO Community that save hours of manual work — from automation rules to custom dashboards.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 3 -->
|
|
<article class="card" data-reveal data-reveal-delay="300" data-category="news">
|
|
<div class="card-thumb">
|
|
<span class="card-cat cat-news">News</span>
|
|
<span class="placeholder-icon">📢</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-date">Coming Soon</p>
|
|
<h3>Why ODOO Community is the Best Base for AI</h3>
|
|
<p>An analysis of ODOO's modular architecture and why it's uniquely suited for AI integration in 2025 and beyond.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 4 (empty placeholder) -->
|
|
<article class="card" data-reveal data-reveal-delay="400" data-category="tutorial">
|
|
<div class="card-thumb">
|
|
<span class="card-cat cat-tutorial">Tutorial</span>
|
|
<span class="placeholder-icon">▶</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-date">Upcoming</p>
|
|
<h3>AI Chatbot + ODOO: Full Tutorial</h3>
|
|
<p>Build an AI-powered customer service chatbot connected to your ODOO CRM — step by step.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== ABOUT ===== -->
|
|
<section class="section-pad about" id="about">
|
|
<div class="about-grid">
|
|
<div class="about-avatar" data-reveal>
|
|
<div class="about-avatar-inner">OC</div>
|
|
</div>
|
|
<div class="about-text" data-reveal>
|
|
<p class="section-label">About</p>
|
|
<h2 class="section-title">The OC Guy — <strong>Alter Ego</strong> of Oliver Arnold</h2>
|
|
<p class="section-sub">
|
|
I'm Oliver Arnold (安雷威), and The OC Guy is my alter ego — the voice that cuts through the noise to show small companies and startups why ODOO Community is the smartest ERP decision they can make.
|
|
</p>
|
|
<dl class="about-detail">
|
|
<dt>Belief</dt>
|
|
<dd>You don't need expensive enterprise licenses to run an AI-powered business. ODOO Community gives you a battle-proven foundation. The AI revolution should be accessible to everyone.</dd>
|
|
<dt>Mission</dt>
|
|
<dd>To make ODOO Community the default choice for startups and SMEs entering the AI era — through clear tutorials, honest advocacy, and real demonstrations.</dd>
|
|
<dt>Approach</dt>
|
|
<dd>Video-first, personality-driven, no fluff. Real ODOO features, real demonstrations, real results. No fabricated case studies, no corporate speak.</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== VIDEOS (section anchor) ===== -->
|
|
<section class="section-pad" id="videos-section" style="display:none" aria-hidden="true"></section>
|
|
|
|
<!-- ===== CTA / CONTACT ===== -->
|
|
<section class="section-pad cta" id="cta">
|
|
<div class="cta-inner" data-reveal>
|
|
<p class="section-label" style="color:var(--amber)">Get in Touch</p>
|
|
<h2 class="section-title">Ready to build your <strong>ODOO + AI</strong> stack?</h2>
|
|
<p class="section-sub">
|
|
Whether you're evaluating ODOO, looking for integration advice, or just want to follow along — reach out. Let's make ODOO Community the standard for modern business.
|
|
</p>
|
|
<div class="cta-actions">
|
|
<a href="mailto:oliver@oc-guy.com" class="cta-email">✉ oliver@oc-guy.com</a>
|
|
<a href="#content" class="btn btn-primary">Explore Content</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== FOOTER ===== -->
|
|
<footer class="site-footer" role="contentinfo">
|
|
<div class="footer-grid">
|
|
<div>
|
|
<div class="footer-brand">
|
|
<span class="brand-mark" aria-hidden="true"></span>
|
|
<span>THE OC GUY</span>
|
|
</div>
|
|
<p class="footer-copy">ODOO Community Advocate — Oliver Arnold / 安雷威</p>
|
|
</div>
|
|
<div class="footer-social">
|
|
<a href="https://oc-guy.com" aria-label="YouTube" title="YouTube">YT</a>
|
|
<a href="https://oc-guy.com" aria-label="X / Twitter" title="X / Twitter">X</a>
|
|
<a href="https://oc-guy.com" aria-label="LinkedIn" title="LinkedIn">in</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(function(){
|
|
'use strict';
|
|
|
|
// Scroll reveal
|
|
const revealEls = document.querySelectorAll('[data-reveal]');
|
|
if (revealEls.length && 'IntersectionObserver' in window) {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
|
|
revealEls.forEach(el => observer.observe(el));
|
|
} else {
|
|
revealEls.forEach(el => el.classList.add('is-visible'));
|
|
}
|
|
|
|
// Header scroll state
|
|
const header = document.getElementById('header');
|
|
let lastScroll = 0;
|
|
window.addEventListener('scroll', () => {
|
|
const y = window.scrollY;
|
|
if (y > 60) {
|
|
header.classList.add('is-scrolled');
|
|
} else {
|
|
header.classList.remove('is-scrolled');
|
|
}
|
|
lastScroll = y;
|
|
}, { passive: true });
|
|
|
|
// Mobile nav toggle
|
|
const navToggle = document.getElementById('navToggle');
|
|
const focalNav = document.getElementById('focalNav');
|
|
if (navToggle && focalNav) {
|
|
navToggle.addEventListener('click', () => {
|
|
const expanded = navToggle.getAttribute('aria-expanded') === 'true';
|
|
navToggle.setAttribute('aria-expanded', !expanded);
|
|
focalNav.classList.toggle('is-open');
|
|
});
|
|
|
|
// Close nav on link click
|
|
focalNav.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
navToggle.setAttribute('aria-expanded', 'false');
|
|
focalNav.classList.remove('is-open');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Content filter (blog tabs)
|
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
|
const cards = document.querySelectorAll('.card-grid .card');
|
|
filterBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
filterBtns.forEach(b => { b.classList.remove('is-active'); b.setAttribute('aria-selected', 'false'); });
|
|
btn.classList.add('is-active');
|
|
btn.setAttribute('aria-selected', 'true');
|
|
const filter = btn.dataset.filter;
|
|
cards.forEach(card => {
|
|
if (filter === 'all' || card.dataset.category === filter) {
|
|
card.style.display = '';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Active nav link based on scroll
|
|
const sections = document.querySelectorAll('section[id]');
|
|
const navLinks = focalNav ? focalNav.querySelectorAll('a') : [];
|
|
if (sections.length && navLinks.length && 'IntersectionObserver' in window) {
|
|
const navObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
navLinks.forEach(link => {
|
|
link.removeAttribute('aria-current');
|
|
if (link.getAttribute('href') === '#' + entry.target.id) {
|
|
link.setAttribute('aria-current', 'page');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}, { threshold: 0.2, rootMargin: '-80px 0px -40% 0px' });
|
|
sections.forEach(s => navObserver.observe(s));
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |