/************************************************************************/
/******************* Portfolious StyleSheet *****************************/
/************************************************************************/
/*
00. General Settings
01. Headings & Colours
02. Header
03. Home Blog Posts Settings
04. Content, Home Sidebar
05. Footer
06. General Sidebar
07. Post General Settings
Additional: Common Classes
---------------------------------------------
Author: Onur Oztaskiran - www.monofactor.com
*/
/************************************************************************/
/************************************************************************/
/*** 00. General Settings ***/
/** ----------------------------------------------------- **/
body {font: 82.5% "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial;
/*** you can change background image here if you like**/
background: url(images/backgrounds/bg-office.jpg) #ebebeb no-repeat top center;}
body, html {height:100%}
a { cursor: pointer;}
/** common classes **/
.clearfix { width: 100%; height: 0px; clear: both; display: block;}/* clearfix for floated elements */
.hidden {display: none;}
.right {float: right;}
.left {float: left;}
.morespace {padding: 3px 0 !important;}
.full-width {width: 100% !important;}
a.bt, a.bt span {display: inline-block; height:22px}
a.bt {padding-left: 15px; background: url(images/bt-casual-left.png) no-repeat; color:#000; margin-top: 5px; text-decoration: none; }
a.bt:hover {color: #666;}
a.bt span { background: url(images/bt-casual-right.png) no-repeat right; padding-right: 15px; line-height:20px}
/** 咖啡色按钮 **/
a.arrowedbt {
background: url(images/bt-casual-left-arrowed.png) no-repeat;
padding-left: 26px;
font-size: 1.1em !important;
margin-top: 0px !important;
/* 缩放设置 - 0.8 表示缩小到80%，1.2表示放大到120% */
transform: scale(1.25);
/* 可选：调整缩放后的位置偏移（默认会从中心缩放） */
transform-origin: left center; /* 从左侧中间点开始缩放，避免位置偏移 */
}
a.arrowedbt:hover {color: #995e00 !important; background: url(images/bt-casual-left-arrowed-hover.png) no-repeat;}
a.left-button {background-image: url(images/bt-casual-left-arrowed-left.png) !important}
a.left-button:hover {background-image: url(images/bt-casual-left-arrowed-left-hover.png) !important}
/*** 01.a - Headings & Colours **/
/************** colors *****************/
#wide-column h2, #home-blogposts h3, #home-blogposts a, #info a, div.blog p a, .categories a, #comments a:hover {color:#995e00}
ul.cats li a:hover, ul.cats li.active a {color:ffc600 !important; background-color:#ffc600;background-image:url(images/arrow-mini-white.png); border:5px solid #b16d00;}
/**************************************/
/** logo **/
#header h1 { float: left; margin-right: 60px;}
#header h1 a {background: url(images/logo.png) no-repeat; width: 175px; height: 46px; display:block; text-indent:-9999px} /** home featured section headings **/
#featured-info h3 { font-size: 2em; margin-bottom: 25px;}
#featured-info h6 {
font-size: 3em;
margin-bottom: 25px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
font-family: 'sjgy', sans-serif;
}
#featured-info h7 {
font-size: 1.2em;
margin-bottom: 25px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
#content h8 {font-size: 1.1em; font-family: "Verdana", Verdana, Helvetica, Arial;color: #474753; }
#content h9 {font-size: 1.1em; font-family: "Arial", Verdana, Helvetica; font-weight: bold;}
#content h10 {
font-size: 1.6em;
font-family: "Arial", Verdana, Helvetica;
font-weight: bold;
color: #ffffff; /* 设置字体颜色为天蓝色 */
background-color: #3d00c8; /* 设置背景颜色为深灰色，天蓝色字体 */
}
#content h11 {
font-size: 2.1em;
font-family: "Arial", Verdana, Helvetica;
font-weight: bold;
color: #6ddeff; /* 设置字体颜色为白色 */
background-color: #333333; /* 设置背景颜色为深紫色，白色字体 */
}
#content h12 {
font-size: 1.4em;
font-family: "Arial", Verdana, Helvetica;
font-weight: bolder;
color: #bc0000;
background-color: #ffcc00; /* 设置背景颜色为黄色，红字 */
}
#content h13 {
font-size: 1.2em;
font-family: "Arial", Verdana, Helvetica;
font-weight: bolder;
color: #ff0001; /* 设置红色字体 */
}
#content h14 {
font-size: 1em;
font-family: "Arial", Verdana, Helvetica;
font-weight: bolder;
color: #2741b2; /* 设置蓝色字体 */
}
#content h15 {
font-size: 1.4em;
font-family: "Arial", Verdana, Helvetica;
font-weight: bolder;
color: #754302; /* 设置字体颜色 */
background-color: #c8c8c8; /* 设置背景颜色 */
}
#content h16 {
font-size: 1.4em;
font-family: "Arial", Verdana, Helvetica;
font-weight: bolder;
color: #754302; /* 设置字体颜色 */
background-color: #ffcc00; /* 设置背景颜色 */
}
}
#featured-info h3 a { color: #fff; text-decoration: none;}
#featured-info h3 a:hover:after {content: " →";}
/** #content general headings **/
#content h3 {font-size: 1.75em; font-family: "Lucida Grande", Verdana, Helvetica, Arial; }
#content h4 {font-size: 1.35em;}
#content h5 {font-size: 1.15em;}
/** sidebar headings **/
#sidebar-home h3, #home-blogposts h3 { border-bottom: 1px solid #999; margin-bottom:1px; padding-bottom:5px}
#sidebar-home h3 { color: #333;}
#sidebar h3 {font-size: 1.3em; border-bottom: 1px solid #999; margin-bottom:1px; padding-bottom:5px; color: #333;}
/** flickr heading **/
li.flickr h3 {background: url(images/icon-flickr.png) no-repeat 2px 0; padding-left: 38px;}
/** post listing general headings **/
#posts h4 {margin-bottom: 8px;}
#posts h4 a {color:#333; text-decoration: none; text-transform: uppercase;}
#posts h4 a:hover {text-decoration: underline;}
.portfolio h4 {font-size: 1.3em !important; line-height:1.4em;}
/** twitter heading **/
li.twitter h3 {padding-left: 60px; background: url(images/icon-twitter.png) no-repeat ;}
/** right side wide column headings **/
#wide-column h2 {font-size:1.7em; border-bottom: 1px solid #999; margin-bottom:1px; padding-bottom:5px;}
div.the-post h2, div.the-post h3, div.the-post h4, div.the-post h5 {margin-bottom:15px; padding-top:5px;}
div.the-post h3 {font-size: 1.3em !important;}
div.the-post h4 {font-size: 1.15em !important;}
div.the-post h5 {font-size: 1em !important;}
div#info h3 { border-bottom: 1px solid #aaa; font-size: 1.3em; padding-bottom: 2px; padding-top: 10px; color: #333; }
#comments h3, h3#respond-title {font-size:1.4em ; color: #333;}
/** Container Settings **/
#container-wrap {width: 100%; height:100%; margin: 0 auto -65px; position:relative; min-height: 100%; height: auto !important; height: 100%;}
#container {width: 960px; padding: 20px 5px; margin: 0 auto; }
.sub {background:url(images/bg-container-sub.png) repeat-x 0px 50px}
#container .sub {padding-top: 50px;}
.push {height:61px;}
/*** 02. Header ***/
/** main and footer navigation **/
#header ul, ul#nav-footer {min-width: 400px; max-width: 475px; float:left; padding-top:10px}
#header ul li, ul#nav-footer li { float:left; margin-right:10px}
#header ul li a, ul#nav-footer li a {display:block; color: #ccc; text-decoration: none; text-transform: uppercase; padding-left: 12px; }
#header ul li a span, ul#nav-footer li a span {display:block; line-height: 30px; padding-right: 12px; }
#header ul li a:hover, #header ul li.active a {
color: #fff; background: url(images/nav-left.png) no-repeat;}
#header ul li a:hover span, #header ul li.active a span {
background: url(images/nav-right.png) no-repeat right;}
#header ul li {position: relative; }
#header ul li ul {position: absolute; margin-top: 0px; background: #fff; -moz-border-radius: 5px;-webkit-border-radius: 5px; -khtml-border-radius: 5px;
min-width: 150px; max-width:200px !important; padding: 5px; }
#header ul li ul li {margin: 0; float: none;}
#header ul li ul li a {color: #666; text-transform: none; font-size: 0.9em;}
#header ul li ul li a, #header ul li ul li a:hover {background-image: none; padding: 5px !important; }
#header ul li ul li a:hover {-moz-border-radius: 5px;-webkit-border-radius: 5px; -khtml-border-radius: 5px; background: #333; color: #fff; }
ul#nav-footer li { margin-right: 5px;}
ul#nav-footer li a {color: #666; -moz-border-radius: 10px;-webkit-border-radius: 10px; -khtml-border-radius: 10px; background-image:none;
font-size:0.9em}
ul#nav-footer li a span {background-image: none !important; line-height:25px}
ul#nav-footer li a:hover, ul#nav-footer li.selected a { background: #666; color: #fff;}
/** search **/
#header fieldset {float: right; width:207px; padding-top: 10px;}
#header fieldset legend {display: none;}
#header fieldset label {background: url(images/bg-search.png); padding-left: 38px; height: 27px; display:block}
#header fieldset label input {border: none; background: none; padding-top:7px; color:#666; line-height:17px /** <- be careful **/}
/*** 03. Home Featured Section ***/
#featured { padding-top: 30px; color:#fff}
#featured-info, #home-featured-nav {float: left;}
#featured-images {float: right;}
#featured-info { width: 455px; margin-top: 72px;}
#featured-info p { margin: 10px 0;}
#featured-info p strong{color: #d98f19;}
a#home-read-more-button {background: url(images/bt-home-readmore.png) no-repeat; width:128px; height: 42px; margin-top: 25px;
display:block; text-indent: -9999px; }
/** featured images**/
#featured-images {width: 440px; height: 416px; background:url(images/computer.png) no-repeat top center; margin-right:-10px;
position:relative;}
#images {margin: 42px 0 0 50px;}
#images ul li {width: 354px; height: 214px;}
span.glare { background: url(images/computer-glare.png) no-repeat; display:block; position: absolute; right: 25px; top: 30px;
width: 219px; height: 239px; z-index: 9999; }
/** featured slider navigation **/
ul#home-featured-nav { background: url(images/bg-homeslider.png) no-repeat; width: 33px; height: 48px; margin-left: 35px; margin-top: 127px;
padding-top: 12px; }
ul#home-featured-nav li { margin-bottom: 5px;}
ul#home-featured-nav a { width: 16px; height: 18px; display: block; text-indent: -9999px; margin: auto;
filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6;}
ul#home-featured-nav a:hover {filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;}
ul#home-featured-nav li.next a { background: url(images/homeslider-arrow-down.png) no-repeat; margin-left: 9px;}
ul#home-featured-nav li.prev a { background: url(images/homeslider-arrow-up.png) no-repeat;}
/*** 04. Content ***/
#content {font-size: 0.95em;}
#content p {margin: 15px 0; color: #555;}
/** 04.a - Home Sidebar and Sidebar General **/
#sidebar-home {width: 435px; float: left;}
#sidebar-home img.shade, #home-blogposts img.shade, #sidebar img.shade {display: block; height: 20px;}
#sidebar-home img.shade{width: 435px;}
#sidebar-home p strong {color: #333;}
#sidebar-home ul li p:first-child {margin-top: 0px;}
#sidebar-home ul li, #sidebar ul li { border-bottom: 1px solid #ccc; margin-bottom: 35px; padding-bottom: 3px; }
#sidebar-home ul li ul li, #sidebar ul li ul li { border-bottom: none; margin-bottom:0px;}
/** flickr **/
li.flickr { position: relative;}
li.flickr ul li img { border: 1px solid #999; margin: 0 10px 0px 0; }
a.bt-flickr {width: 38px; height: 85px; position: absolute; right:10px; top:50px; background: url(images/bt-flickr.png) no-repeat;}
a.bt-flickr span { display: none;}
li.sideflickr ul li img {margin-right: 0px;}
/** 04.b - Home Blog Posts **/
#home-blogposts { width: 475px; float: right; border-bottom:1px solid #ccc; position: relative; padding-bottom: 15px; }
#home-blogposts img.shade {width: 475px;}
span.date { color: #999; padding-left: 22px; display: block; background: url(images/icon-date.png) no-repeat; font-size: 0.9em;
line-height:18px; margin-bottom: 10px; }
img.post-thumb { border: 1px solid #666;float: left; margin: 0 12px 12px 0;}
.portfolio img.post-thumb { margin: 0 20px 20px 0;}
/** homepage blog posts, testimonials and twitter slider navigation **/
ul#home-blogposts-nav, ul.testimonials-nav, ul.twitter-nav
{width: 40px; height: 40px; padding: 4px 0 0 5px; background: #dfdfdf; -moz-border-radius: 10px;
-webkit-border-radius: 10px; -khtml-border-radius: 10px; position: absolute; right: 0; bottom: -12px; }
ul#home-blogposts-nav li, ul.testimonials-nav li, ul.twitter-nav li {float: left;}
ul#home-blogposts-nav a, ul.testimonials-nav a, ul.twitter-nav a
{display: block; width: 16px; height: 16px; margin-right: 5px; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6;}
ul#home-blogposts-nav a:hover, ul.testimonials-nav a:hover, ul.twitter-nav a:hover
{filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;}
ul#home-blogposts-nav a span, ul.testimonials-nav a span, ul.twitter-nav a span {display: none;}
ul#home-blogposts-nav li.prev a, ul.twitter-nav li.prev a {background: url(images/arrow-low-prev.gif) no-repeat;}
ul#home-blogposts-nav li.next a, ul.twitter-nav li.next a {background: url(images/arrow-low-next.gif) no-repeat;}
ul.testimonials-nav li.next a {background: url(images/arrow-low-down.gif) no-repeat;}
ul.testimonials-nav li.prev a {background: url(images/arrow-low-up.gif) no-repeat;}
/*** 05. Footer ***/
#footer-wrap {background: url(images/bg-footer.gif) #d9dada repeat-x; padding-bottom: 10px; position: relative; }
#footer {width: 960px; padding: 10px; margin: 0 auto;}
a#monofactor {display: block; width:180px; float: right; color:#999; text-decoration: none; line-height:22px; font-size:0.9em; padding-top: 12px; }
a#monofactor span {display: inline-block; background: url(images/logo-monofactor.png) no-repeat; width: 104px; height: 22px; text-indent:-9999px}
/*** 06. General Sidebar ***/
#sidebar { width: 260px; float: left; padding-top: 6px; }
#sidebar img.shade{width: 250px; height: 20px !important; }
#sidebar p:first-child {margin-top: 0px;}
#sidebar ul li {padding-bottom: 8px;}
#sidebar ul li ul {font-size:0.95em;}
#sidebar ul li a {color: #333; text-decoration: none;}
#sidebar ul li a:hover {color: #666}
/** sidebar categories **/
ul.cats li {width: 280px ; margin-right: 5px; margin-bottom:10px; float:left;}
ul.cats li a {display:block; padding:3px; padding-left:10px; background:url(images/arrow-mini.png) no-repeat 10px 8px;
-moz-border-radius: 10px;-webkit-border-radius: 40px; -khtml-border-radius: 10px; border:1px solid #d1d1d1;}
/** sidebar alternate link lists **/
li.alternate-lists ul li {padding: 0 !important;}
li.alternate-lists ul li a {display: block; background: url(images/dot.gif) no-repeat 5px 11px; padding: 5px; padding-left: 15px; }
li.alternate-lists ul li a:hover {color:#995e00 !important; background-image:url(images/dot-hover.gif); background-color: #f1f1f1; }
/** testimonials and twitter widget **/
li.testimonials, li.twitter {position: relative; font-size: 0.9em; padding-bottom: 10px !important; }
li.testimonials blockquote p, li.twitter p {color: #777 !important;}
li.testimonials blockquote {font-style: italic; background: url(images/quote.png) no-repeat; padding: 0px 10px 0 20px; }
ul.testimonials-nav li {padding: 0px !important; background: none !important;}
li.twitter p {margin: 5px 0 !important;}
li.twitter p.timeago {color: #333 !important;}
/*** 07. Post General Settings **/
/** wide column **/
#wide-column {width: 650px; float: right; }
div.full-width p {margin-top: 15px !important;}
#info a {text-decoration: none; border-bottom: 1px solid #999; }
#info a:hover {color:#666; text-decoration: none; border-bottom: 1px solid #995e00; }
#info h4 { text-transform: uppercase;}
/** 07.a posts general settings **/
.each-post {border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 30px;}
.each-post p {margin-top: 0px !important;line-height:1.4em; }
.each-post a.bt {margin-top:10px !important;}
div.blog span.date {float: left !important;}
div.blog p:first-child {margin-top: 0px !important;}
a.comment-count, a.comment-add {display:inline-block; font-size:0.9em; color:#666; padding-left:20px; background: url(images/icon-comments.png) no-repeat; line-height: 16px; margin-left: 15px; }
a.comment-count:hover, a.comment-add:hover { color: #333;}
a.comment-add {background-image: url(images/icon-comment-add.png) !important;}
div.the-post ul { padding: 5px 10px 20px 25px; }
div.the-post ul li {line-height: 1.5em; color: #666; list-style-type: disc; list-style-position: inside; }
div.the-post ul li strong {color: #333;}
div.the-post blockquote {font-style: italic; background: url(images/quote.png) no-repeat; padding: 10px 10px 10px 20px; padding-bottom: 15px; color: #777; }
/** 07.b post meta **/
.postmeta { clear: both; line-height:3em; font-size: 0.9em; color: #999; background: #f7f7f7; margin-top: 10px;}
.postmeta a:hover { text-decoration: none;}
.postmeta div { float: left; }
.author {display: block; color: #666; float: left; padding: 0 15px 0 30px; background: url(images/icon-author.gif) no-repeat 10px 8px; }
.categories, .tags {padding: 0 15px;}
.categories {background: #f1f1f1;}
.tags a {color: #927b57;}
#info {float: right; width: 305px;}
/** 07.c comments **/
#comments_wrap h3 { font-size: 22px; font-weight: normal; margin: 0px; padding-bottom: 20px; margin-top: 10px;}
#comments_wrap h3 a, #comments_wrap h3 a:hover {color: #242323; text-decoration: none;}
#comments_wrap .get_avatar {color: #a7a7a7; font-size: 10px;letter-spacing: -1px;padding-top: 10px;}
#comments ol.parent {padding-bottom: 25px}
#comments ol { margin: 0px; padding: 0px; padding-left: 100px;}
#comments ol li {list-style: none; padding: 0px; margin: 10px 0px; padding-top: 1px;}
#comments span.comment-reply { font-size: 10px; text-transform: uppercase;}
#comments .comment_wrap {position: relative; background: #f2f2f2;}
#comments .single_comment { padding: 10px;}
#comments .comment-content { padding: 10px; background: #fafafa; }
#comments .comment-content p, .children .comment-content p {padding-bottom: 15px; color: #666;}
#comments a {color:#333; border-bottom:1px solid #995e00; text-decoration:none}
#comments a:hover {border-bottom:1px solid #ccc; text-decoration:none}
#comments .comment_arrow { position: absolute; top: 20px; left: -11px;}
#comments .comment_author { position: absolute; left: -100px; width: 100px; color: #8d8d8d; font-size: 10px; line-height: 14px; }
#comments .comment_author span {display: block;}
#comments .children { padding-left: 0px; border-left: 1px solid #ced0d0;}
#comments .children li {padding-left: 25px; background: url(images/comment_li_bg.gif) no-repeat 0px 25px;}
#comments .children .comment_wrap { background: #f2f2f2; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede;}
#comments .children .comment_arrow { display: none;}
#comments .children .comment_author { position: absolute; left: auto; right: 20px; bottom: 10px; width: 200px; height: 40px;}
#comments .children .comment_author p { position: absolute; right: 40px; bottom: 10px; text-align: right;}
#comments .children .comment_author span { display: block;}
#comments .children .comment_author img { width: 32px; height: 32px; float: right;}
/** 07.d comment form **/
div#respond {padding: 20px 0;}
div#respond ol li {padding:8px; -moz-border-radius: 5px;-webkit-border-radius: 5px; -khtml-border-radius: 5px; background: #f6f6f6; margin-bottom: 10px;
clear: both; }
div#respond ol li:hover, #respond ol li:focus {background: #fff !important; }
div#respond ol li label {float: left; padding-left: 15px; color: #666; border-left: 1px solid #ccc; }
div#respond ol li label.field-title { width:30%; border-left:none !important; padding-left: 0px; }
div#respond ol li label small {font-size: 0.8em; color: 999;}
div#respond ol li.text input {border: none !important; background: none !important; width:420px; line-height: 1.3em; }
div#respond ol li textarea {border: none !important; background: none !important; width:420px; line-height: 1.6em; }
#work-list ul {display: none; height: 80px; }
#work-list ul li {float:left; margin-right:10px}
#work-list ul li a {display: block; padding: 2px 0 0 2px; background: url(images/bg-avatar.png) no-repeat; width: 68px; height: 68px;}
a#bt-expander {width: 300px; height: 15px; background: url(images/bt-expander.png) no-repeat; display: block; padding-left: 80px; color: #999; font-size: 0.8em; padding-top: 3px; }
a.expanded, a#bt-expander:hover { background-position: 0px -18px !important; color: #777; }
//鼠标经过图片放大
li a img {
transition: transform 1s ease; /* 添加过渡效果，使放大过程更平滑，持续时间0.3秒，缓动效果为ease */
}
li a:hover img {
transform: scale(1.03); /* 当鼠标悬停在包含图片的链接上时，图片放大1.1倍，你可根据需要调整放大倍数 */
}
//指定H6用的字体
@font-face {
font-family: 'sjgy';
src: url('sjgy.ttf') format('truetype');
/* 如果还有其他格式的字体文件，比如woff或woff2，可以添加更多的src定义来提供更好的兼容性 */
/* src: url('MyCustomFont.woff') format('woff');
src: url('MyCustomFont.woff2') format('woff2'); */
font-weight: normal;
font-style: normal;
}
}
/* 基础样式 */
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
line-height: 1.8;
background-color: #f8f5f0;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d4af37' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}
h1 {
color: #995e00; /* 金色标题 */
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
/* 选项卡容器 - 移除边框线 */
.tab-container {
/* 关键修改：将border设置为none以去除边框 */
border: none !important;
border-radius: 8px;
overflow: hidden;
margin-top: 20px;
background: transparent !important;
}
/* 选项卡按钮区域 */
.tab-buttons {
display: flex;
background-color: transparent !important; /* 按钮区域背景透明 */
border-bottom: 1px solid #e0c888;
}
/* 选项卡按钮 - 完全移除背景 */
.tab-btn {
padding: 12px 20px;
background: none !important; /* 彻底移除背景 */
border: none !important; /* 移除所有边框 */
cursor: pointer;
font-size: 20px;
flex: 1;
transition: all 0.3s ease;
color: #995e00; /* 土黄色默认文字 */
margin: 0 !important; /* 移除边距 */
}
/* 按钮悬停状态 - 无背景色 */
.tab-btn:hover:not(.active) {
background-color: transparent !important; /* 悬停时也无背景 */
color: #cd853f; /* 仅改变文字颜色 */
}
/* 按钮选中状态 - 仅保留金色下划线 */
.tab-btn.active {
background: none !important; /* 选中状态无背景 */
color: #995e00; /* 金色选中文字 */
font-weight: bold;
border-bottom: 3px solid #995e00 !important; /* 仅保留金色下划线 */
}
/* 选项卡内容区域 */
.tab-content {
padding: 25px;
display: none;
background: transparent !important;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease;
}
/* 内容区域标题和文字颜色 */
.tab-content h2 {
color: #995e00; /* 金色标题 */
margin-top: 0;
border-bottom: 1px dashed #995e00;
padding-bottom: 10px;
}
.tab-content ul, .tab-content p {
color: #754302; /* 土黄色文字 */
font-size: 16px;
}
.tab-content li {
margin: 8px 0;
}
/* 淡入动画 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/*
中文口令页面网格布局容器样式
用于控制所有分类卡片的整体排列方式*/
.categories-grid {
display: grid; /* 使用CSS Grid布局模式 */
/*
自动计算列数：
- auto-fill: 根据容器宽度自动填充列
- minmax(300px, 1fr): 每列最小300px，最大平均分配剩余空间
实现响应式效果，屏幕宽时多列，窄时自动减少列数
*/
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px; /* 卡片之间的间距（水平和垂直方向都是15px） */
margin: 20px auto; /* 上下外边距20px，左右自动居中容器 */
max-width: 800px; /* 容器最大宽度限制为800px，防止宽屏显示时过宽 */
}
/* 主标题样式
控制页面顶部大标题的显示效果 */
.main-title {
font-size: 1.2em; /* 字体大小为默认字体的1.8倍 */
font-family: 'Arial', Verdana, Helvetica; /* 字体家族，优先使用Arial，没有则用备选字体 */
font-weight: bold; /* 字体加粗显示 */
color: #333; /* 字体颜色为深灰色（#333等价于#333333） */
text-align: center; /* 文字水平居中对齐 */
margin: 20px 0; /* 上下外边距20px，左右外边距0 */
}
/* 卡片容器基础样式
控制每个分类卡片的整体外观 */
.category-card {
background: none; /* 取消背景色，完全透明 */
border: 2px solid#bbb; /* 1px宽的浅灰色边框（#ddd是浅灰色） */
border-radius: 5px; /* 边框四角圆角处理，弧度6px */
padding: 15px; /* 卡片内部内边距15px（内容与边框的距离） */
margin: 5px; /* 卡片外部外边距5px（卡片之间的额外距离） */
}
/* 卡片标题样式（容器内大标题） */
.category-card h3 {
font-size: 1em; /* 标题字体大小 */
color: #222; /* 标题颜色（深灰色） */
line-height: 1.1; /* 标题行间距 */
font-family: 'Arial', Verdana, Helvetica;
font-weight: bold;
border-bottom: 1px dashed #ccc;
padding-bottom: 8px;
margin-top: 0; /* 去除默认顶部间距 */
margin-bottom: 12px; /* 标题与内容的间距 */
}
/* 卡片标题内的小字样式 */
.category-card h3 span {
font-size: 1em; /* 相对于父元素（h3）的75%大小 */
color: #666; /* 浅灰色 */
font-weight: normal;
margin-left: 8px;
}
/* 卡片内容区域样式 */
.category-card .content {
/* 内容区域整体样式 */
}
/* 内容区域内的段落样式 */
.category-card .content p {
font-size: 1.1em; /* 内容文字大小 */
color: #222; /* 内容文字颜色（中灰色） */
line-height: 0.7; /* 行间距（行高），数值越大行距越宽 */
font-family: 'Arial', Verdana, Helvetica;
margin: 2px 2; /* 段落之间的上下间距 */
padding-left: 40px;
position: relative;
}
/* 段落前的圆点样式 */
.category-card .content p span {
color: #666; /* 圆点颜色 */
position: absolute;
left: 16px;
}
/* 卡片悬停效果 */
.category-card:hover {
border-color: #995e00;
transform: translateY(-5px);
transition: all 0.3s ease;
}
/* 轮播组件专用样式
所有类名均以x-开头，避免与现有样式冲突 */
/* 轮播容器：包裹整个轮播组件的最外层容器 */
.x-carousel-container {
position: relative; /* 相对定位，作为内部绝对定位元素的参考 */
overflow: hidden; /* 隐藏超出容器范围的内容，实现轮播可视区域效果 */
border-radius: 6px; /* 容器边角圆角处理 */
margin: 20px 0; /* 容器上下外边距，控制与其他元素的间距 */
padding: 0px; /* 容器内边距，让内容与边框有一定距离 */
width: 130%; /* 固定宽度（如800px） */
}
/* 轮播轨道：承载所有轮播项的容器，用于实现滑动效果 */
.x-carousel-track {
display: flex; /* 弹性布局，使轮播项横向排列 */
transition: transform 0.5s ease-out; /* 过渡动画，使滑动更平滑 */
}
/* 轮播项：每个需要轮播的二级容器 */
.x-carousel-item {
min-width: 100%; /* 每个轮播项宽度占满容器，一次显示一个 */
padding: 0 10px; /* 左右内边距，控制轮播项之间的间距 */
box-sizing: border-box; /* 盒模型设置，确保padding不影响整体宽度 */
transition: all 0.5s ease-out; /* 过渡动画，用于悬停效果 */
}
/* 轮播卡片：轮播项内部的内容容器 */
.x-carousel-card {
border: 1px solid #ddd; /* 卡片边框，浅灰色 */
border-radius: 6px; /* 卡片边角圆角处理 */
padding: 15px; /* 卡片内边距，内容与边框的距离 */
background: #fff; /* 卡片背景色，白色 */
height: 100%; /* 高度占满父容器，确保所有卡片高度一致 */
}
/* 图片容器：用于包裹轮播图片的容器 */
.x-carousel-img-container {
width: 100%; /* 宽度占满卡片 */
height: 200px; /* 固定图片容器高度 */
overflow: hidden; /* 隐藏超出容器的图片部分 */
margin-bottom: 15px; /* 底部外边距，与下方内容分隔 */
border-radius: 4px; /* 图片容器边角圆角处理 */
}
/* 轮播图片：卡片内的图片样式 */
.x-carousel-img {
width: 100%; /* 宽度占满图片容器 */
height: 100%; /* 高度占满图片容器 */
object-fit: cover; /* 图片缩放模式，保持比例并覆盖容器 */
transition: transform 0.3s ease; /* 过渡动画，用于图片悬停放大效果 */
}
/* 轮播标题：卡片内的标题样式 */
.x-carousel-title {
font-size: 1.2em; /* 标题字体大小 */
margin: 0 0 10px 0; /* margin设置，底部10px与内容分隔 */
padding: 0; /* 清除默认padding */
}
/* 轮播描述：卡片内的文本描述样式 */
.x-carousel-desc {
font-size: 0.9em; /* 描述文本字体大小，比标题小 */
line-height: 1.5; /* 行高设置，提高可读性 */
margin: 0 0 15px 0; /* margin设置，底部15px与按钮分隔 */
}
/* 轮播按钮：卡片内的操作按钮样式 */
.x-carousel-btn {
display: inline-block; /* inline-block模式，可设置宽高和边距 */
text-decoration: none; /* 清除默认下划线 */
}
/* 左右控制按钮：通用样式 */
.x-carousel-prev, .x-carousel-next {
position: absolute; /* 绝对定位，相对于轮播容器 */
top: 50%; /* 垂直方向居中定位 */
transform: translateY(-50%); /* 垂直居中微调 */
width: 36px; /* 按钮宽度 */
height: 36px; /* 按钮高度 */
border-radius: 50%; /* 圆形按钮 */
background: rgba(255,255,255,0.8); /* 半透明白色背景 */
border: 1px solid #ddd; /* 按钮边框，浅灰色 */
display: flex; /* 弹性布局，内部图标居中 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
cursor: pointer; /* 鼠标悬停时显示手型指针 */
z-index: 10; /* 层级设置，确保按钮在轮播内容上方 */
}
/* 左控制按钮：定位在左侧 */
.x-carousel-prev {
left: 15px; /* 距离左侧15px */
}
/* 右控制按钮：定位在右侧 */
.x-carousel-next {
right: 15px; /* 距离右侧15px */
}
/* 指示器容器：包裹所有轮播指示器的容器 */
.x-carousel-indicators {
position: absolute; /* 绝对定位，相对于轮播容器 */
bottom: 10px; /* 距离底部10px */
left: 0; /* 左侧对齐容器 */
right: 0; /* 右侧对齐容器 */
display: flex; /* 弹性布局，指示器横向排列 */
justify-content: center; /* 水平居中 */
gap: 8px; /* 指示器之间的间距 */
}
/* 单个指示器：显示当前轮播位置的小点 */
.x-carousel-indicator {
width: 1px; /* 指示器宽度 */
height: 10px; /* 指示器高度 */
border-radius: 5%; /* 圆形指示器 */
cursor: pointer; /* 鼠标悬停时显示手型指针 */
}
/* 激活状态的指示器：当前显示项对应的指示器样式 */
.x-carousel-indicator.active {
background-color: #999; /* 激活状态时填充深灰色 */
}
/* 悬停效果：轮播项整体悬停时的样式 */
.x-carousel-item:hover {
transform: scale(1.02); /* 轻微放大1.52倍 */
z-index: 5; /* 提高层级，避免被其他元素遮挡 */
}
/* 图片悬停效果：鼠标经过图片时的样式 */
.x-carousel-img:hover {
transform: scale(1.05); /* 图片放大1.05倍，实现缩放效果 */
}
/* 底部深灰色条样式 - 全屏宽度+可控制高度 */
#footer {
background-color: #333; /* 深灰色背景 */
height: 80px; /* 自定义高度 */
width: 100%; /* 宽度占满整个屏幕 */
margin: 1px 0 0; /* 仅保留顶部间距，移除左右间距 */
padding: 0; /* 清除内边距限制 */
display: flex;
justify-content: center;
/* 确保不受父容器影响 */
position: relative;
left: 0;
right: 0;
}
/* 备案信息样式 */
#footer > div {
color: #ccc !important; /* 浅灰文字 */
text-align: center;
}