/*
Theme Name: Framecraft
Description: A dark editorial block theme for an English After Effects tutorial blog.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Author: Framecraft
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: framecraft
*/
:root{color-scheme:dark}
html{scroll-behavior:smooth}
body{margin:0}
a{text-underline-offset:5px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #b8a0ff;outline-offset:5px}
.fc-header{border-bottom:1px solid #30323e;padding-top:24px!important;padding-bottom:24px!important}
.fc-kicker{font-family:monospace;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.fc-hero{padding-top:76px!important;padding-bottom:76px!important}
.fc-hero h1{font-size:clamp(44px,6.5vw,86px);line-height:1.02;letter-spacing:-.055em;margin-top:20px}
.fc-hero p{max-width:530px}
.fc-stage{min-height:380px;position:relative;border:1px solid #454151;border-radius:18px;background:radial-gradient(ellipse at 50% 40%,#47316a 0%,#191924 58%,#13141a 100%);overflow:hidden;display:flex;align-items:center;justify-content:center}
.fc-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:32px 32px}
.fc-orbit{width:190px;height:190px;border:1px solid #b8a0ff;border-radius:38px;transform:rotate(-16deg);box-shadow:0 0 80px #9463ff40;display:flex;align-items:center;justify-content:center}
.fc-orbit span{color:#d8c9ff;font-size:64px;font-weight:800;transform:rotate(16deg);letter-spacing:-.08em}
.fc-stage-label{position:absolute;left:22px;top:18px;font:11px monospace;color:#c5bed5;letter-spacing:.08em}
.fc-timeline{position:absolute;bottom:24px;left:22px;right:22px;height:48px;border-top:1px solid #ffffff25;padding-top:14px;display:grid;gap:7px}
.fc-timeline i{display:block;height:8px;border-radius:2px;background:#a78bfa;width:72%}
.fc-timeline i:nth-child(2){width:49%;margin-left:22%;background:#a8e6c0}
.fc-timeline i:nth-child(3){width:60%;margin-left:9%;background:#7466bb}
.fc-topic{height:100%;border:1px solid #30323e;border-radius:12px;padding:24px!important}
.fc-topic h3{font-size:22px;margin-top:10px}
.fc-topic p{font-size:15px;color:#afb1c2}
.fc-section{padding-top:48px!important;padding-bottom:48px!important}
.fc-card{border:1px solid #30323e;background:#171820;border-radius:14px;padding:22px!important;height:100%;box-sizing:border-box}
.fc-card h2{font-size:24px;line-height:1.25}
.fc-card .wp-block-post-featured-image{margin:0 0 22px}
.fc-card .wp-block-post-featured-image img{aspect-ratio:16/10;object-fit:cover;border-radius:8px}
.fc-card .wp-block-post-date,.fc-card .wp-block-post-terms{font-size:12px;color:#b8a0ff}
.fc-card .wp-block-post-excerpt{font-size:15px;color:#b9bac9}
.fc-callout{border:1px solid #454151;background:#201c2d;border-radius:16px;padding:36px!important}
.fc-footer{border-top:1px solid #30323e;padding-top:36px!important;padding-bottom:36px!important;color:#afb1c2;font-size:13px}
.wp-block-post-content{line-height:1.8}
.wp-block-post-content h2,.wp-block-post-content h3{line-height:1.25}
.wp-block-post-content pre{padding:20px;background:#1c1e28;overflow:auto;border-radius:8px}
.wp-block-post-content img{border-radius:10px}
.wp-block-search__input{background:#171820;color:#f4f3f8;border:1px solid #454151;border-radius:6px}
.wp-block-search__button{background:#b8a0ff;color:#121219;border:0;border-radius:6px}
.wp-block-navigation__responsive-container.is-menu-open{background:#111218;color:#f4f3f8}
@media(max-width:781px){.fc-hero{padding-top:40px!important;padding-bottom:40px!important}.fc-stage{min-height:320px}.fc-section{padding-top:30px!important;padding-bottom:30px!important}.fc-topic{height:auto}.fc-header .wp-block-site-title{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}