css/style.css

   1 /**
   2  * If using a CSS pre-processor, tell it to overwrite this file. If not, place
   3  * your custom CSS modifications here.
   4  */
   5
   6 /* Lato font */
   7
   8 @font-face {
   9     font-family: "Lato";
  10          url("../fonts/Lato-Regular.ttf") format('truetype');
  11     font-weight: 400;
  12     font-style: normal;
  13 }
  14
  15 @font-face {
  16     font-family: "Lato";
  17          url('../fonts/Lato-RegularItalic.ttf') format('truetype');
  18     font-weight: 400;
  19     font-style: italic;
  20 }
  21
  22 @font-face {
  23     font-family: "Lato";
  24          url('../fonts/Lato-Bold.ttf') format('truetype');
  25     font-weight: 700;
  26     font-style: normal;
  27 }
  28
  29
  30 /* Universal */
  31
  32 body {
  33   font-family: "Lato", Helvetica, Arial, sans-serif;
  34   margin: 0;
  35   min-width: 320px;
  36 }
  37
  38 a { transition: 0.3s; }
  39
  40 section { position: relative; }
  41
  42 /* etcetera */
  43
  44 .visually-hidden.focusable:focus {
  45     position: absolute !important;
  46     background: #000;
  47     color: #FFF;
  48     padding: 0.5em;
  49     z-index: 9999;
  50 }
  51
  52 .region-content { min-height: 300px; }
  53
  54 h2.block-title {
  55   background: #000;
  56   color: #FFF;
  57   padding: 0.5em;
  58 }
  59
  60 .feed-icons a {
  61   background: url('../images/rss.svg') top left no-repeat;
  62   background-size: contain;
  63   height: 20px;
  64   overflow: hidden;
  65   display: block;
  66   text-indent: 25px;
  67   font-size: 1em;
  68   width: fit-content;
  69   margin-top: 1em;
  70   float: right;
  71 }
  72
  73 .view-display-id-news_page .feed-icons a {
  74   margin-top: -30px;
  75 }
  76
  77 .more-link {
  78   border: 1px solid #ddd;
  79   border-radius: .5em;
  80   padding: .5em;
  81   text-align: center;
  82   width: 50%;
  83   margin: 0 auto;
  84   font-weight: bold;
  85   margin-top: 2em;
  86 }
  87
  88 .more-link:hover {
  89   background: #EEE;
  90   color: #000;
  91 }
  92
  93 .block-views {
  94   margin-top: 20px;
  95 }
  96
  97 /* Navbar */
  98
  99 .navbar-default {
 100   background: #000;
 101   color: #FFF;
 102   border: none;
 103   border-radius: 0px;
 104   box-sizing: content-box;
 105   align-items: center;
 106   min-height: 100px;
 107 }
 108
 109 .navbar-header,
 110 #navbar-collapse {
 111   max-width: 1150px;
 112   padding: 0;
 113   margin: 0 auto;
 114   border: none;
 115   overflow: hidden;
 116 }
 117
 118 .navbar-default .navbar-toggle { display: none; }
 119
 120 .navbar-header {
 121   position: absolute;
 122   top: 5px;
 123 }
 124
 125 .navbar-brand { display: none; }
 126
 127 #block-ryf-main-menu .navbar-nav { margin-left: 195px; }
 128
 129 .navbar-default .navbar-nav > li > a:focus {
 130   outline: none;
 131 }
 132
 133 .navbar-default .navbar-nav > li > a,
 134 .navbar-default .navbar-nav > li > a:link,
 135 .navbar-default .navbar-nav > li > a:visited {
 136   color: #FFF;
 137   background: #000;
 138   border-bottom: 2px solid transparent;
 139   padding-bottom: 10px;
 140   margin-bottom: 5px;
 141 }
 142
 143 .navbar-default .navbar-nav > li > a:focus,
 144 .navbar-default .navbar-nav > li.active > a:hover,
 145 .navbar-default .navbar-nav > li > a:hover {
 146   color: #DDCC00;
 147   background: #000;
 148   border-bottom: 2px solid #DDCC00;
 149   padding-bottom: 5px;
 150   margin-bottom: 10px;
 151 }
 152
 153 .navbar-default .navbar-nav > li > a.is-active {
 154   border-bottom: 2px solid #FFF;
 155   background: #000;
 156   padding-bottom: 5px;
 157   margin-bottom: 10px;
 158 }
 159
 160 .page-header {
 161   border-bottom: 2px solid #000;
 162   font-size: 2em;
 163 }
 164
 165 .region-header .search-block-form {
 166   width: 300px;
 167   float: right;
 168 }
 169
 170 nav .search-block-form {
 171   position: absolute;
 172   width: 300px;
 173   right: 10%;
 174   top: 30px;
 175 }
 176
 177 /*
 178  *  @media screen and (min-width: 520px) and (max-width: 599px) {
 179  *   .logo img { margin-left: 50px; }
 180  *   #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
 181  * }
 182  *
 183  * @media screen and (min-width: 600px) and (max-width: 767px) {
 184  *   .logo img { margin-left: 100px; }
 185  *   #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
 186  * }
 187  *
 188  * @media screen and (max-width: 767px) {
 189  *   .logo img { height: 150px; margin-top: 25px; }
 190  *   .navbar-default { min-height: 230px; margin-bottom: 30px; }
 191  *   #block-ryf-main-menu .navbar-nav { max-width: 130px; }
 192  * }
 193  *
 194  */
 195
 196 @media screen and (min-width: 768px) {
 197
 198   .navbar-default {
 199      margin-bottom: 100px;
 200   }
 201   .navbar-nav {
 202      margin-top: 40px;
 203   }
 204   .region-header .breadcrumb {
 205     position: absolute;
 206     top: -70px;
 207     left: 200px;
 208     background: none;
 209   }
 210   .region-navigation-collapsible .search-block-form {
 211     float: right;
 212     padding-top: 30px;
 213     width: 210px;
 214   }
 215 }
 216
 217
 218 /* Selectors */
 219
 220
 221 @media screen and (min-width: 768px) {
 222   .form-inline .form-item .select-wrapper {
 223     display: block;
 224   }
 225   .form-inline .form-actions {
 226     margin-top: 21px;
 227   }
 228 }
 229
 230
 231 /* RYF List */
 232
 233
 234 .ryf-list-row {
 235   padding: 0;
 236   margin: 0 auto;
 237   overflow: auto;
 238 }
 239
 240 .ryf-list {
 241   float: left;
 242   margin: 0;
 243   padding: 0.5em;
 244   position: relative;
 245   list-style: none;
 246 }
 247
 248 .ryf-list article {
 249   border: 1px solid #ececec;
 250   border-radius: 5px;
 251   border-top: none;
 252   border-left: none;
 253   padding: 1em;
 254   box-shadow: 2px 2px 5px #ddd;
 255   transition: 0.3s;
 256 }
 257
 258 .ryf-list article:hover {
 259   box-shadow: 0px 0px 5px #aaa;
 260 }
 261
 262 .ryf-list article:before {
 263     content: '';
 264     float: left;
 265     padding-top: 100%;
 266 }
 267
 268 .ryf-list .field--type-image {
 269   width: 150px;
 270   height: 150px;
 271   background: #fff;
 272   border-radius: 10px;
 273   display: flex;
 274   align-items: center;
 275 }
 276
 277 .ryf-list .field--name-field-image {
 278   margin: 0 auto 10px auto;
 279 }
 280
 281 .ryf-list img {
 282   max-width: 150px;
 283   max-height: 150px;
 284   object-fit: contain;
 285   overflow: hidden;
 286 }
 287
 288 .ryf-list img:hover {
 289   border-radius: 0;
 290 }
 291
 292 .ryf-list h2 {
 293   text-align: left;
 294   font-size: 1.5em;
 295   font-weight: 500;
 296   line-height: 1.2em;
 297   margin: 0;
 298   padding: 0;
 299   padding-bottom: 1em;
 300   height: 100px;
 301   overflow: hidden;
 302 }
 303
 304 .ryf-list a {
 305   color: #337AB7;
 306   text-decoration: none;
 307 }
 308
 309 .ryf-list a:hover {
 310   color: #000;
 311 }
 312
 313 .ryf-list .node-readmore,
 314 .ryf-list .tags,
 315 .ryf-list .supplier {
 316   width: 100%;
 317   float: left;
 318   font-size: 0.9em;
 319   border-top: 1px solid #ccc4c4;
 320   margin-top: 5px;
 321   padding-top: 5px;
 322   color: #afadad;
 323 }
 324
 325 .ryf-list .node-readmore {
 326   text-align: right;
 327 }
 328
 329 @media screen and (min-width: 450px) and (max-width: 659px) {
 330   .ryf-list-row {
 331     max-width: 600px;
 332   }
 333   .ryf-list {
 334     max-width: 300px;
 335     float: none;
 336     margin: 0 auto;
 337   }
 338 }
 339 @media screen and (min-width: 660px) and (max-width: 767px) {
 340   .ryf-list-row {
 341     max-width: 600px;
 342   }
 343   .ryf-list-row {
 344     margin: 0 auto;
 345     max-width: 660px;
 346   }
 347   .ryf-list {
 348     max-width: 300px;
 349     float: left;
 350   }
 351   .auto-clear .col-xs-12:nth-child(odd){clear:left;}
 352 }
 353
 354
 355 /* Vendors list */
 356
 357
 358 .vendors-list-row {
 359   padding: 10px;
 360   margin: 0 auto;
 361   overflow: auto;
 362 }
 363
 364 @media screen and (max-width: 767px) {
 365   .vendors-list-row {
 366     margin: 0px auto;
 367   }
 368
 369   .vendors-list {
 370     margin-bottom: 40px;
 371     list-style: none;
 372
 373     overflow: auto;
 374   }
 375
 376   .vendors-list .views-field-field-icon {
 377     width: 220px;
 378
 379     margin: 0px auto 20px auto;
 380   }
 381
 382   .vendors-list .views-field-field-icon img {
 383     margin: 0 auto;
 384   }
 385
 386   .vendors-list .views-field-name,
 387   .vendors-list .views-field-description__value {
 388     max-width: 300px;
 389     margin: 0 auto 10px auto;
 390   }
 391
 392   .vendors-list .views-field-name {
 393     font-weight: bold;
 394     font-size: 18px;
 395     text-align: center;
 396   }
 397
 398 }
 399
 400 @media screen and (min-width: 768px) {
 401   .vendors-list-row {
 402     width: 600px;
 403     margin: 0px auto;
 404   }
 405
 406   .vendors-list {
 407     list-style: none;
 408     clear: left;
 409
 410     overflow: auto;
 411   }
 412
 413   .vendors-list .views-field-field-icon {
 414     width: 220px;
 415     height: 220px;
 416
 417     margin-bottom: 40px;
 418
 419     float: left;
 420   }
 421
 422   .vendors-list .views-field-field-icon img {
 423     margin: 0 auto;
 424   }
 425
 426   .vendors-list .views-field-name,
 427   .vendors-list .views-field-description__value {
 428     margin-left: 300px;
 429   }
 430
 431   .vendors-list .views-field-name {
 432     margin-bottom: 10px;
 433     font-weight: bold;
 434     font-size: 18px;
 435   }
 436 }
 437
 438
 439 /* Sidebars */
 440
 441
 442 @media screen and (max-width: 767px) {
 443   .path-products #block-views-block-categories-categories-block { display: none; }
 444 }
 445
 446
 447 /* Vendor and Category taxonomy term pages */
 448
 449
 450 .view-taxonomy-term .view-header .field--name-field-icon img {
 451   margin: 0 auto;
 452 }
 453
 454 .view-filters {
 455   clear: left;
 456 }
 457
 458 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 459 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 460   margin-top: 15px;
 461 }
 462
 463 @media screen and (max-width: 559px) {
 464   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 465     margin: 0 auto 40px auto;
 466
 467     overflow: auto;
 468   }
 469
 470   .view-taxonomy-term .view-header .field--name-field-icon {
 471     margin: 0 auto 20px auto;
 472     width: 220px;
 473   }
 474
 475   .view-taxonomy-term .view-header .field--name-description,
 476   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 477   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 478     max-width: 360px;
 479     margin: 15px auto 0 auto;
 480     padding: 0 10px;
 481   }
 482
 483 }
 484
 485 @media screen and (min-width: 560px) {
 486   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 487     margin: 0 0 40px 0;
 488
 489     overflow: auto;
 490   }
 491
 492   .view-taxonomy-term .view-header .field--name-field-icon {
 493     width: 220px;
 494
 495     float: left;
 496   }
 497
 498   .view-taxonomy-term .view-header .field--name-description,
 499   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 500   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 501     margin-left: 260px;
 502   }
 503
 504 }
 505
 506 @media screen and (min-width: 768px) {
 507   .view-taxonomy-term .view-header {
 508     max-width: 700px;
 509   }
 510 }
 511
 512
 513 /* Product */
 514
 515
 516 @media screen and (max-width: 767px) {
 517   .page-node-type-product .product {
 518     max-width: 382px;
 519     margin: 0 auto;
 520   }
 521 }
 522
 523 @media screen and (min-width: 768px) and (max-width: 991px) {
 524   .page-node-type-product .product {
 525     width: 700px;
 526     margin: 0 auto;
 527   }
 528 }
 529
 530 @media screen and (min-width: 992px) {
 531   .page-node-type-product .product {
 532     width: 800px;
 533     margin: 0 auto;
 534   }
 535 }
 536
 537 .page-node-type-product .product .field--name-field-image {
 538   padding: 10px;
 539
 540   border: 1px solid #888;
 541   border-radius: 10px;
 542 }
 543
 544 .page-node-type-product .product .field--name-field-image img {
 545   margin: 0 auto;
 546 }
 547
 548 .page-node-type-product .product .field--name-field-extra-images {
 549   padding: 5px;
 550
 551   display: flex;
 552   align-items: center;
 553
 554   border: 1px solid #888;
 555   border-radius: 10px;
 556 }
 557
 558 .page-node-type-product .product .field--name-field-extra-images .field--item {
 559   display: inline-block;
 560   margin: auto;
 561   padding: 5px;
 562 }
 563
 564 .page-node-type-product .product .field--name-field-categories,
 565 .page-node-type-product .product .field--name-field-vendor {
 566   margin: 10px 10px 20px 0px;
 567   padding: 10px;
 568   border: 1px solid #888;
 569   border-radius: 10px;
 570 }
 571
 572 .page-node-type-product .product .field--name-field-categories .field--item {
 573   display: list-item;
 574   list-style: circle;
 575   margin-left: 15px;
 576 }
 577
 578 #block-views-block-categories-categories-block ul {
 579   margin: 0; padding: 0 10px;
 580   list-style: none;
 581 }
 582
 583 #block-views-block-categories-categories-block li {
 584   padding: 5px 10px;
 585   border: 1px solid #DDD;
 586   border-radius: 5px;
 587   list-style: none;
 588   margin: 5px 0;
 589 }
 590
 591 #block-views-block-categories-categories-block li:hover {
 592   background: #EEE;
 593   color: #000;
 594 }
 595
 596 #block-views-block-categories-categories-block a {
 597   width: 100%;
 598   display: block;
 599 }
 600
 601 /* product page colors */
 602 .page-node-type-product .product .field--name-field-image {
 603   background-color: #fff;
 604   border-color: #aaa;
 605 }
 606 .page-node-type-product .product .field--name-field-extra-images {
 607   background-color: #f3f3f3;
 608   border-color: #aaa;
 609 }
 610 .page-node-type-product .product .field--name-field-categories {
 611   background-color: #def;
 612   border-color: #8ad;
 613 }
 614 .page-node-type-product .product .field--name-field-vendor {
 615   background-color: #dfe;
 616   border-color: #8da;
 617 }
 618
 619 @media screen and (max-width: 767px) {
 620   .page-node-type-product .product .field--name-field-extra-images {
 621     margin: 10px auto 0px auto;
 622   }
 623
 624   .page-node-type-product .product .field--name-body,
 625   .page-node-type-product .product .field--name-field-vendor-product-link,
 626   .page-node-type-product .product .field--name-field-certification-details,
 627   .page-node-type-product .product .field--name-field-certification-date,
 628   .page-node-type-product .product .field--name-field-source-code-links {
 629     margin-bottom: 20px;
 630   }
 631
 632   .page-node-type-product .product .field--name-field-categories,
 633   .page-node-type-product .product .field--name-field-vendor {
 634     margin-bottom: 0px;
 635     float: left;
 636   }
 637
 638   .page-node-type-product .product .field--name-body {
 639     padding-top: 20px;
 640     clear: both;
 641   }
 642 }
 643
 644
 645 @media screen and (min-width: 768px) {
 646   .page-node-type-product .product .field--name-field-image {
 647     width: 382px;
 648     float: left;
 649   }
 650
 651   .page-node-type-product .product .field--name-field-extra-images {
 652     float: left;
 653     clear: left;
 654
 655     width: 382px;
 656     margin-top: 10px;
 657   }
 658
 659   .page-node-type-product .product .field--name-body,
 660   .page-node-type-product .product .field--name-field-vendor-product-link,
 661   .page-node-type-product .product .field--name-field-certification-details,
 662   .page-node-type-product .product .field--name-field-certification-date,
 663   .page-node-type-product .product .field--name-field-source-code-links {
 664     margin-left: 400px;
 665     margin-bottom: 20px;
 666   }
 667
 668   .page-node-type-product .product .field--name-field-categories {
 669     float: left;
 670     clear: left;
 671   }
 672
 673   .page-node-type-product .product .field--name-field-vendor {
 674     float: left;
 675   }
 676
 677 }
 678
 679
 680 /* News and Product Announcements */
 681
 682
 683 .page-node-type-product-announcement .page-header,
 684 .page-node-type-product-announcement .tabs--primary,
 685 .page-node-type-product-announcement .region-content,
 686 .page-node-type-general-news-item .page-header,
 687 .page-node-type-general-news-item .tabs--primary,
 688 .page-node-type-general-news-item .region-content,
 689 .page-node-type-page .page-header,
 690 .page-node-type-page .tabs--primary,
 691 .page-node-type-page .region-content,
 692 .path-news .page-header,
 693 .path-news .tabs--primary,
 694 .path-news .region-content {
 695   max-width: 800px;
 696   margin: 0 auto;
 697 }
 698
 699 /* don't apply above max-width rule to main page */
 700 .path-frontpage .page-header,
 701 .path-frontpage .tabs--primary,
 702 .path-frontpage .region-content {
 703   max-width: 2000px; /* high number beyond the max */
 704 }
 705
 706 .page-node-type-page .page-header {
 707   margin-bottom: 20px;
 708 }
 709
 710 .path-news h2,
 711 .block-views-blocknews-news-block article h2 {
 712   font-size: 25px;
 713 }
 714
 715 .page-node-type-product-announcement .author,
 716 .page-node-type-general-news-item .author {
 717   margin: 10px 0 20px 0;
 718   font-style: oblique;
 719 }
 720
 721 .page-node-type-product-announcement .field--name-body,
 722 .page-node-type-general-news-item .field--name-body {
 723   margin-bottom: 20px;
 724 }
 725
 726 .page-node-type-product-announcement .field--name-field-external-news-link,
 727 .page-node-type-general-news-item .field--name-field-external-news-link {
 728   margin-bottom: 20px;
 729 }
 730
 731 .page-node-type-product-announcement .field--name-field-vendor-page,
 732 .page-node-type-product-announcement .field--name-field-announced-products {
 733   margin-bottom: 20px;
 734 }
 735
 736
 737 /* Search Results */
 738
 739
 740 @media screen and (max-width: 600px) {
 741   .path-search .region-content > ol {
 742     width: 300px;
 743   }
 744 }
 745 @media screen and (min-width: 601px) and (max-width 1000px) {
 746   .path-search .region-content > ol {
 747     width: 560px;
 748   }
 749 }
 750 @media screen and (min-width: 1001px) {
 751   .path-search .region-content > ol {
 752     width: 900px;
 753   }
 754 }
 755
 756 .path-search .region-content > ol {
 757   margin: 0 auto;
 758   padding-left: 0;
 759   overflow: auto;
 760 }
 761
 762 .path-search .region-content > ol li {
 763   width: 280px;
 764   height: 280px;
 765   margin: 0px auto;
 766   padding: 10px;
 767
 768   float: left;
 769
 770   list-style: none;
 771   overflow: hidden;
 772 }
 773
 774 .path-search .region-content > ol li h3 {
 775   text-align: center;
 776 }
 777
 778 .path-search .region-content > ol li .search-image {
 779   width: 100px;
 780   height: 100px;
 781
 782   margin: 0 auto;
 783
 784   display: flex;
 785   align-items: center;
 786 }
 787
 788 .path-search .region-content > ol li img {
 789 }
 790
 791
 792 /* Footer */
 793
 794
 795 .footer {
 796   background: #333;
 797   color: #FFF;
 798 }
 799
 800 /* full page width for footer */
 801 .footer {
 802   width: 100%;
 803 }
 804
 805 .footer a { color: #DDCC00; }
 806
 807 .footer a:hover { color: #FFF; }
 808
 809 .footer h4 { font-weight: bold; }
 810
 811 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
 812
 813 #fsf-logo-footer { margin-bottom: 10px; }
 814
 815 @media print { #fsf-logo-footer { filter: invert(100%) } }
 816